access svg element in a arearange HighCharts chart

Question

The last line of the following code (brutally copied from a HighCharts demo chart page) changes the opacity of a arearange series:

var chart=Highcharts.chart('container', {

    series: [{
        name: 'Temperature',
        data: averages,
        zIndex: 1,
        marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[0]
        }
    }, {
        name: 'Range',
        data: ranges,
        type: 'arearange',
        lineWidth: 0,
        linkedTo: ':previous',
        color: Highcharts.getOptions().colors[0],
        fillOpacity: 0.3,
        zIndex: 0,
        marker: {
            enabled: false
        }
    }]
});

chart.series[1].update({fillOpacity:0.7},true);

JSFiddle here.

(the opacity could be set directly inside the chart object, but I need to modify it after the chart creation, the code is a toy example to simulate my needs)

My real chart has several arearange series, and updating them is heavy. Is there a way to modify such property avoiding the .update method? that it, is there a way to directly access the svg element corresponding to the arearange series?

I've tried to check the series .graph property, as previously suggested in an answer to a similar question, but in this case arearange series has no .graph property.

score 1 · Accepted Answer · answered Jun 06 '19 at 08:16

It can be done exactly the same as in the answer mentioned in your question but instead of modifying the graph you have to modify the area property.

Code:

  chart.series[1].area.attr({
    fill: 'rgba(124,181,236,0.7)'
  });

Demo:

https://jsfiddle.net/BlackLabel/abohcq4x/

access svg element in a arearange HighCharts chart

1 Answers1