CODEWITHSUNDEEP
highchartslegendx-axis
vegaelce
vegaelce

Reputation: 145

Custom legend in Highcharts Variwide

Based on an existing sample, I have added a custom legend on a Highcharts Variwide chart. The legend works very well! Result is visible here : https://jsfiddle.net/vegaelce/d4mrnu2h/

The only next feature I need is to hide/show the corresponding label on the X axis when I click on a legend item. This have to work also when horizontally scrolling on the chart.

I tried to use the function

this.series.xAxis.ticks[x].label.hide();

in the legendItemClick function but id doesn't works very well (especially when I scroll).

How to achieve that please ?

Upvotes: 0

Views: 76

Answers (1)

Michał
Michał

Reputation: 1469

You can use xAxis.labels.formatter() function for conditional display of the name if the point is visible:

xAxis: {
  labels: {
    formatter: function() {
      return this.axis.series[0].points[this.pos].visible ? this.value : '';
    }
  }
}

Demo: https://jsfiddle.net/BlackLabel/dfcq9xz8/
API: https://api.highcharts.com/highcharts/xAxis.labels.formatter

Upvotes: 1

Related Questions