CODEWITHSUNDEEP
highchartsbackground-color
Barthelemy Lancelot
Barthelemy Lancelot

Reputation: 41

Change the background color above a curve

I am using Highcharts, and I would like to know if there is a way to change the background color above a specific curve? I can do it below the curve but I didn't found the way to do it above.

Can you help me on this?

Thank you for your help, Best,

Upvotes: 0

Views: 159

Answers (1)

Mark Z.
Mark Z.

Reputation: 2447

UPDATE WAY EASIER WAY TO DO IT:

plotOptions: {
    areaspline: {
        fillOpacity: 0.5,
        threshold: 15 // your y-axis max goes here
    }
},

example: https://jsfiddle.net/mzhukovs/8aqbp3xm/2/

But this is only if you want to cover ALL points, otherwise you method below and NOT with smoothed lines (i.e. splines).

Use the range series type and set the data equal to as described in the comments, basically such that for each x-axis value, the range goes from your actual y-value to the max value on the y-axis (which you can set via the y-axis properties so you know it every time or use js to get it dynamically).

e.g.

   series: [{
        name: 'John',
        data: [3, 4, 3, 5, 4, 10, 12]
    }, {
        name: 'Jane',
        data: [1, 3, 4, 3, 3, 5, 4]
    },
    {
        name: 'John Range Example',
        data: [
        [4, 4, 15], // index 0: x-category, 1: equal to point, 2: equal to y-axis max (which you should identify or set yourself explicitly so always known)
        [5, 10, 15],
        [6, 12, 15]],
        type: 'arearange',
        lineWidth: 0,
        //linkedTo: ':previous',
        color: Highcharts.getOptions().colors[0],
        fillOpacity: 0.3,
        zIndex: 0,
        marker: {
            enabled: false
        }
    }]
}

Here's a fiddle where I did it for only part of one of the lines: https://jsfiddle.net/mzhukovs/8aqbp3xm/

If you don't want any interactivity of this shaded region at all, then you'll have to disable the marker and on-hover actions, shouldn't be hard. Hope this helps!

Upvotes: 2

Related Questions