CODEWITHSUNDEEP
javascriptjquerychartshighcharts
VBeregovoy
VBeregovoy

Reputation: 29

How to make z-index for area lines in highcharts?

i have chart like this jsfiddle

Here is my plotOptions and Series

plotOptions: {
        area: {
            marker: {
                enabled: false
            },
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    }


series: [{
        data: [9.9, 51.5, 66.4, 49.2, 84.0, 186.0, 15.6, 198.5, 96.4, 134.1, 105.6, 24.4],
        color: '#f8f3ee',
        lineColor: '#e6d7c2',
        fillOpacity: 1
    }, {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        color: '#f8f3ee',
        lineColor: '#bd965d',
        lineWidth: 2,
        fillOpacity: 1
    }]

There is 2 areas, with same fill color, same opacity: 1, and Y/X gridlines.

Is it possible somehow to set z-index for area line?

Here is what i am need. image

So both area lines should have z-index higher than area fill, and higher than gridlines. But gridlines should have z-index higher than area fill

Thank you.

Upvotes: 0

Views: 2891

Answers (3)

charlie
charlie

Reputation: 91

You must use the series.index option.

See: http://api.highcharts.com/highcharts#series.index

This is the description:

index: NumberSince 2.3.0

The index of the series in the chart, affecting the internal index in the chart.series array, the visible Z index as well as the order in the legend.

An example of code

series: [{
    index:2,
    data: [9.9, 51.5, 66.4, 49.2, 84.0, 186.0, 15.6, 198.5, 96.4, 134.1, 105.6, 24.4],
    color: '#f8f3ee',
    lineColor: '#e6d7c2',
    fillOpacity: 1
}, {
    index: 1,
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    color: '#f8f3ee',
    lineColor: '#bd965d',
    lineWidth: 2,
    fillOpacity: 1
}]

A jsfiddle showing how to use it.

http://jsfiddle.net/vaa2uqpt/1/

Upvotes: 2

user2345998
user2345998

Reputation: 649

When removing the opacity, the chart looks like your image:

series: [{
    data: [9.9, 51.5, 66.4, 49.2, 84.0, 186.0, 15.6, 198.5, 96.4, 134.1, 105.6, 24.4],
    color: '#f8f3ee',
    lineColor: '#e6d7c2'
    //fillOpacity: 1
}, {
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    color: '#f8f3ee',
    lineColor: '#bd965d',
    lineWidth: 2
    //fillOpacity: 0.1
}]

http://jsfiddle.net/nbLjtLjy/1/

Or do I miss something?

Upvotes: 1

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can use Renderer which allows to print custom elements on charts.

http://api.highcharts.com/highcharts#Renderer.text

Upvotes: 0

Related Questions