Changing color of spline lines based on values in HighCharts

Question

I can change the marker color based on if it's above (red) or below (green) or between (yellow), but cannot change the color of the line in between the markers. Is this possible? Right now, it just displays as a blue line.

function makeRun(divId, last, current, goal, title, yAxisTitle) {
    var width = 1000; var SizeOfFont = '14px';
    var min = checkMinMaxArray(current, last, goal, 'min') * 995 / 1000; //sets min closely below the real min. **consider changing to 4/5 digits**
    var max = checkMinMaxArray(current, last, goal, 'max') * 1005 / 1000; //sets max closely above the real max

    //if there are projections, color code the columns here
    preprocessData = function (data, last, goal) {
        var nData = [];
        var colorGood = 'green'; var colorBad = '#E42217'; var colorUse;
        for (var i = 0; i < data.length; i++) {
            if (data[i] <= goal[i]) { colorUse = colorGood; }
            else if (data[i] > last[i]) { colorUse = colorBad; }
            else { colorUse = '#FFE303'; }
            nData.push({
                y: data[i],
                x: i,
                fillColor: colorUse,
                color: colorUse
            });
        }
        return nData;
    };

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: divId,
            height: 275, //little bigger than alotted height to make more readable
            width: width //dependent on #gauges
        },
        title: {
            text: title, //should all be the same, can make a parameter if need to be different
            style: { //size of text above
                fontSize: SizeOfFont
            }
        },
        xAxis: {
            //categories: xAxisTitles,
            labels: { //size of the Text above^^
                style: {
                    fontSize: SizeOfFont
                }
            }
        },
        yAxis: {
            min: min,
            max: max,
            title: {
                text: yAxisTitle, //parameter since some are days, percents, etc
                style: {//size of y axis title
                    fontSize: SizeOfFont
                }
            },
            labels: {
                style: {//size of the y axis tick labels
                    fontSize: SizeOfFont
                }
            }
        },
        credits: {//gets rid of the highcharts logo in bottom right
            enabled: false
        },
        legend: {//the legend at the bottom
            style: {
                fontSize: '12px'
            }
        },
        series: [{
            type: 'spline',
            name: '2012',
            data: last,
            color: 'orange',
            marker: {
                symbol: 'diamond'
            }
        }, {
            type: 'spline',
            name: '2013',
            data: preprocessData(current, last, goal),
            marker: {
                symbol: 'diamond'
            }
        }, {
            type: 'spline',
            name: 'Goal',
            data: goal,
            color: 'blue',
            marker: {
                symbol: 'diamond'
            }
        }]
    });
}

see http://stackoverflow.com/questions/9963907/highcharts-can-i-customize-the-colors-of-individual-series — Rachel Gallen, Feb 05 '13 at 20:33
The link above is not what I need - it shows how to turn an entire data series a certain color. I need to be able to change the color in between the markers. — bramwell2010, Feb 05 '13 at 21:21

score 0 · Answer 1 · answered Feb 06 '13 at 08:35

0

It is not possible in one serie, you should prepare two separate serie with different colors.

answered Feb 06 '13 at 08:35

Sebastian Bochan

37,348
3
49
75

Changing color of spline lines based on values in HighCharts

1 Answers1