How to change color of line above or below specify curve line in Highcharts?

Question

Is it possible to change color of line for specified range in Highcharts? I have enclosed an image which presents expected result. Expected result - example

I know that I can use the separated series, but it's uncomfortable. Maybe there is some wrapper (plugin) which makes this process easier.

Make the second color it's own array. and remove those values from the initial array. So you'll create gaps in the first array that are filled by the second in a different color. — FiLeVeR10, Feb 14 '15 at 18:54
Thanks for your comment. I know that I can create separated series, but it's a little bit inconvenient, because I'll have to determine an intersection point and create proper arrays by hand. — gis, Feb 15 '15 at 16:19

score 0 · Answer 1 · answered Feb 14 '15 at 18:59

I was able to find a demo of something similar to your image that may be what you are looking for (and a lot of other good examples with JS.Fiddles and code) I found this one here which uses this code:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'areaspline'
        },
        title: {
            text: 'Average fruit consumption during one week'
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 150,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        xAxis: {
            categories: [
                'Monday',
                'Tuesday',
                'Wednesday',
                'Thursday',
                'Friday',
                'Saturday',
                'Sunday'
            ],
            plotBands: [{ // visualize the weekend
                from: 4.5,
                to: 6.5,
                color: 'rgba(68, 170, 213, .2)'
            }]
        },
        yAxis: {
            title: {
                text: 'Fruit units'
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' units'
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 0.5
            }
        },
        series: [{
            name: 'John',
            data: [3, 4, 3, 5, 4, 10, 12]
        }, {
            name: 'Jane',
            data: [1, 3, 4, 3, 3, 5, 4]
        }]
    });
});

and has a JS.Fiddle for it here. Hope that helps.

Thanks for your answer, but I need to change a color of line within the scope of one series. Using a "plotBands" is not what I'm looking for. — gis, Feb 15 '15 at 16:19

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

As I far as I know, there isn't any wrapper for that. I would to this in two steps:

calculate intersection points
use two separate series or multicolor-series plugin (multiple colors within one line).

edited May 23 '17 at 12:14

Community

1
1

answered Feb 16 '15 at 10:26

Paweł Fus

44,795
3
61
77

How to change color of line above or below specify curve line in Highcharts?

2 Answers2