Search code examples
highchartsangular-highcharts

HighCharts - set minimum Tick Interval

I have a column highchart where I have two series, out of which the data is something as follows :

series1 : [10000, 20000, 30000, 40000, 50000]
series2 : [500, 600, 800, 1200, 1400]

When i have both the axes, It is required to set a tick interval of 10000. So that the ticks of y-axis goes as per series1. And it looks fine.

Now, I click on the legend, allowing only series2 to be displayed.

So only series2 is in the view, and having tickinterval 10000 is not quite what we need.

I need to dynamically adjust the tick interval, when any one series comes in display, i.e, when the legend is clicked. How do I achieve this?

You can try this scenario out at :

https://stackblitz.com/edit/angular-bar-highcharts-kabali

[Click on Balance (legend). tickInterval: 1000000]

Solution

  • You can use legendItemClick event function callback and set tickInterval property dynamically:

      events: {
    legendItemClick: function() {
      if (this.visible) {
        this.yAxis.update({
          tickInterval: 100000
        });
      } else {
        this.yAxis.update({
          tickInterval: 1000000
        });
      }
    }
  }

    Live demo: http://jsfiddle.net/BlackLabel/g1weLpkq/

    API Reference:

    https://api.highcharts.com/highcharts/series.column.events.legendItemClick

    https://api.highcharts.com/class-reference/Highcharts.Axis#update