CODEWITHSUNDEEP
javascriptchartshighcharts
Philipp Staudt
Philipp Staudt

Reputation: 87

Highcharts: Add multiple colors to area line chart

I am trying to create a chart like this one:

enter image description here:

I have already achieved all of the features except the multi colored line of the area chart. I want to show the different gradients of the chart in different colors, thus I need multiple colors on the line.

I have already tested zones like shown here and also common plugins like this. Both do not work. The zones are applied to the area which I do not want and the plugin can only color lines OR areas but not only lines in area charts.

My current Highcharts settings look like this:

{
    title: {
        text: null
    },
    xAxis: {
        crosshair: true,
        labels: {
            format: '{value} km'
        },
        title: {
            text: null
        },
        opposite: true,
        startOnTick: true,
        endOnTick: false,
        min: 0
    },
    yAxis: {
        startOnTick: true,
        showFirstLabel: false,
        endOnTick: false,
        maxPadding: 0.35,
        title: {
            text: null
        },
        min: 100,
        labels: {
            format: '{value} m'
        }
    },
    plotOptions: {
        dataGrouping: {
            enabled: false
        },
        showInNavigator: true,
        stacking: 'normal',
        series: {
            dragDrop: {
                draggableY: true
            },
            point: {
                events: {
                    mouseOver: (e) => {
                        this.chartHover.emit({
                            distance: e.target.x * 1000
                        });
                    },
                }
            },
        },
        area: {
            dragDrop: {
                draggableY: true,
                dragPrecisionY: 1
            }
        }
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    chart: {
        update: true,
        styledMode: true,
        marginBottom: 0,
        marginRight: 0
    },
    tooltip: {
        headerFormat: '',
        pointFormatter: function () {
            let point = this;
            if (!this.series) {
                return;
            }
            return '<span class="tooltip-area-series-' + this.series.index + '">\u25CF</span> ' + point.series.name + ': <b>' + point.y + 'm</b><br/>';
        },
        shared: true
    },
    series: [],
};

Is there an built-in solution for this?

EDIT:

I used the proposed solution by ppotaczek:

series: [{
type: 'areaspline',
id: 'areaSeries',
data: data
}, {
type: 'spline',
linkedTo: 'areaSeries',
data: data,
zoneAxis: 'x',
zones: [{
    color: 'red',
    value: 2
}, {
    color: 'green',
    value: 4
}]
}]

This works pretty good, but has some performance pitfalls when you try to add approx. more than 150 zones on desktop browsers.

There is also a small rendering issue - small gaps between the zones.

enter image description here

Best,

Philipp

Upvotes: 2

Views: 2086

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

You can add an extra spline series with zones:

series: [{
    type: 'areaspline',
    id: 'areaSeries',
    data: data
}, {
    type: 'spline',
    linkedTo: 'areaSeries',
    data: data,
    zoneAxis: 'x',
    zones: [{
        color: 'red',
        value: 2
    }, {
        color: 'green',
        value: 4
    }]
}]

Live demo: http://jsfiddle.net/BlackLabel/8er6y4u3/

API: https://api.highcharts.com/highcharts/series.spline.zones

Upvotes: 3

Related Questions