Different colors for positive/negative parts of column

Question

i'm trying to achieve the following with a columnrange chart:

In the api documentation i found the option "negativeColor" ("The color for the parts of the graph or points that are below the threshold."), but this option is coloring the whole column.

Is there a way to define that the positive part of the column should be "color" and the negative part should be "negativeColor"?

Answer 1

Instead of using columnrange, use simple stacking column series, negative values for one series and positive for the second series.

Answer 2

You can do this.

$(document).ready(function() {

        var options = {
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'bar'
            },
            title: {
                text: 'Spiritual Gifts Results'
            },
            colors: [
                '#3BBEE3'
                ],
            xAxis: {
                categories: []
            },

            yAxis: {
                title: {
                    text: 'Service'
                }
            },
            series: []
        };

        var data = document.getElementById("hdn_Data");
        // Split the lines
        if (data.value != "") {
            var lines = data.value.split('\n');

            // Iterate over the lines and add categories or series
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                // header line containes categories
                if (lineNo == 0) {
                    $.each(items, function(itemNo, item) {
                        if (itemNo > 0) options.xAxis.categories.push(item);
                    });
                }
                // the rest of the lines contain data with their name in the first position
                else {
                    var series = {
                        data: []
                    };
                    $.each(items, function(itemNo, item) {
                        var data = {};
                        if (itemNo == 0) {
                            series.name = item;
                        } else {
                            data.y = parseFloat(item);
                            if (itemNo <= 3) { //Here to specify your mid value
                                data.color = 'Gray';
                            }
                            else {
                                data.color = '#3BBEE3';
                            }
                            series.data.push(data);
                        }
                    });
                    options.series.push(series);
                  }
                });

                // Create the chart
                var chart1 = new Highcharts.Chart(options);
            }
        });