Frank Lou
Posts: 4
Joined: Mon Oct 15, 2018 9:38 am

How to align point in two yAxis

Hi everyone:

I have a chart with two yAxis, demo:
https://jsfiddle.net/Frank_Lou/bgj1wqus/1/

If I want to align two zero point horizontally, what should I do, or which API can help me?

Best regards,
Frank Lou
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: How to align point in two yAxis

Hi Frank Lou,

You can calculate second axis tick positions based on the max series value related to this axis and the first axis ticks positions to get the same amount of ticks and 0 line shared.

Using axis.update() method update tick positions in the second axis using property tickPositions.

Example with a load event. Notice, that when you add points dynamically you have to make those calculations and update tick positions each time your first axis ticks will change (use render event then):

Code: Select all

  chart: {
    type: 'column',
    events: {
      load: function() {
        var chart = this,
          yAxis = this.yAxis,
          max = yAxis[1].dataMax,
          positiveTicksAmount = 0,
          negativeTicksAmount = 0,
          tickPositions = [],
          tickInterval,
          min,
          i;

        yAxis[0].tickPositions.forEach(function(tick) {
          if (tick > 0) {
            positiveTicksAmount++;
          } else if (tick < 0) {
            negativeTicksAmount++;
          }
        });

        tickInterval = max / positiveTicksAmount;

        for (i = negativeTicksAmount; i > 0; i--) {
          tickPositions.push(-tickInterval * i);
        }

        for (i = 0; i <= positiveTicksAmount; i++) {
          tickPositions.push(
            tickInterval * i
          );
        }

        yAxis[1].update({
          tickPositions: tickPositions
        });
      }
    }
  }
Demo:
https://jsfiddle.net/wchmiel/y2bj3u0k/

Api reference:
https://api.highcharts.com/class-refere ... xis#update
https://api.highcharts.com/highcharts/y ... kPositions

Kind regards.
Wojciech Chmiel
Highcharts Developer

Return to “Highcharts Usage”