CODEWITHSUNDEEP
highchartsopacity
Johannes Christ
Johannes Christ

Reputation: 109

Highcharts opacity of series color in line chart not active

The color of the series has a reduced opacity:

      series: [{
      color: '#8ebfd7',
      opacity: .3,
      states: {
            hover: {
                opacity: 1                                                       
            }
      }]

At first the line should be transparent and on hover it should be dark. But it is dark at first and becomes transparent after the mouse once hovered over it. See fiddle

Upvotes: 0

Views: 617

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

I found that it is a documentation bug - this option should be applied like this. More information from the core developers you can find here: https://github.com/highcharts/highcharts/issues/12092 and https://github.com/highcharts/highcharts/issues/11750

This option should work only for particular states, so as a solution you can set each series state as inactive in the chart.events.load.

Demo: https://jsfiddle.net/BlackLabel/076oL9xc/

events: {
  load() {
    let chart = this;
    chart.series.forEach(s => {
      s.setState('inactive')
    })
  }
}

API: https://api.highcharts.com/highcharts/chart.events.load

Upvotes: 1

Related Questions