Aleksandra
Posts: 18
Joined: Tue Oct 17, 2017 8:44 am

Navigator - series with 2 different xAxis and scale

Hello,

I have chart with 2 different series connected to 2 xAxis (one to the left, another to the right). Series are in different scale.
I would like to see nice overview in the navigator but unfortunately one of the series has small values in comparison to another series. So I can see overview for blue series but orange is just a straight line at the bottom of navigator.

My question: How can show overview in navigator for my 2 series despite the differences in scale?
Screen Shot 2018-09-19 at 11.20.26.png
Screen Shot 2018-09-19 at 11.20.26.png (69.32 KiB) Viewed 1040 times
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Navigator - series with 2 different xAxis and scale

Hi Aleksandra,

To show data in navigator like in the chart you can convert and update navigator series:

Code: Select all

  chart: {
    events: {
      load: function() {
        let data = this.series[3].data;
        let yAxis0 = this.yAxis[0];
        let yAxis1 = this.yAxis[1];
        let converter = (yAxis0.max - yAxis0.min) / (yAxis1.max - yAxis1.min);

        Highcharts.each(data, function(el) {
          el.update({
            y: (el.y - yAxis1.min) * converter
          }, false, false)
        });
        this.redraw(false);
      }
    }
  }
Online example:
http://jsfiddle.net/x5goesw4/

Related topic:
https://forum.highcharts.com/highstock- ... xes-t39979

Kind regards.
Wojciech Chmiel
Highcharts Developer
Aleksandra
Posts: 18
Joined: Tue Oct 17, 2017 8:44 am

Re: Navigator - series with 2 different xAxis and scale

Thank you for your answer Wojtek.

I have another question:

Code: Select all

yAxis.max
gives me only current visible max.

How can I get global max value for the chart?

Thanks!
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Navigator - series with 2 different xAxis and scale

Aleksandra,

Global max value for the chart - what do you mean by that? yAxis max value? Data y max value?

To get yAxis max data value:

Code: Select all

yAxis.dataMax
or using getExtremes method:

Code: Select all

yAxis.getExtremes().dataMax
Api reference:
https://api.highcharts.com/class-refere ... etExtremes

Kind regards.
Wojciech Chmiel
Highcharts Developer
Aleksandra
Posts: 18
Joined: Tue Oct 17, 2017 8:44 am

Re: Navigator - series with 2 different xAxis and scale

Sorry, maybe I wasn't clear enough.
getExtremes -> Calculate Y extremes for the visible data
I would like to see extremes for all data not only visible one.
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Navigator - series with 2 different xAxis and scale

Aleksandra,

To get extreme value for all data you can get it when range selector is set to "all" (all data visible) and then yAxis.dataMax. After that, save this value in chart object. Or loop through your data and find extremes on your own.

Kind regards.
Wojciech Chmiel
Highcharts Developer

Return to “Highcharts Stock”