Multiple Y Axes - Assign Series to specific Y Axis

[richardpolzer]

After studying the doc on multiple y-axes I haven't found a way to directly link a series to a specified y-axis (for example through an axis Identifier). Currently, the only option seems to be to create as many y-axes in the options as I have series. However, the number of series in my case depends on the user input.

[arkhenstone]

Either the series doc is incomplete, or the feature doesn't exist. +1 on this one, I also generate many y-axis depending of the number of series. If using Vue, it also lead to issue https://github.com/apexcharts/vue-apexcharts/issues/7

[junedchhipa]

Hi @richardpolzer I agree that referencing the y-axis to a series using just an array index might not be the best solution as compared to referencing the y-axis to a series using a reference ID.

I would like to know what problems you are facing when creating multiple y-axis for multiple series.

Do you want to have less number of y-axis as compared to series? If yes, then I can provide an option to hide certain y-axis by yaxis.show = false that would take it out of the display.

So, for example - you have 4 series and just want to have 2 y-axis, you can try

series: [{
 name: 'A',
 data: [....]
}, {
 name: 'B',
 data: [....]
}, {
 name: 'C',
 data: [....]
}, {
 name: 'D',
 data: [....]
}],
yaxis: [{
  show: true // default will be true
}, {
  show: false
}, {
  show: true,
  opposite: true
}, {
  show: false
}]

The only caveat is that you have to keep track of the indexes of the y-axis array with the series array.

[arkhenstone]

@junedchhipa Another caveat is the automatic min and max for the yaxis that will be scaled only on the series of the same index. If another series scale differently, then the values won't be the same as the one of the axis.

[junedchhipa]

@arkhenstone You mean the min and max of the y-axis should also be scaled correctly when zooming in/out? Or I failed to understand your point?

Here is a gif which shows that when zooming - all y-axis scales correctly.

[richardpolzer]

@junedchhipa as you can see in your gif the Team C line isn't correctly aligned with the Points axis. What @arkhenstone meant I believe is that if we disable the display of the axes we still would need to adjust min and max to every axis that's referring to the same type of data so we won't get incorrect readouts in the chart. So the only possible way I suppose would be to iterate over the datasets -> determine min and Max values -> set min and max for every axis that features that type of data -> hide the unnecessary axes.

[arkhenstone]

This :

chartOptions: {
        xaxis: {
          categories: ['In', 'Out']
        },
        yaxis: [{
          show: true
        },{
          labels: {show: false}
        }]
      },

      series: [
        {
          name: 'Summer',
          data: [27,40]
        },
        {
          name: 'Winter',
          data: [21,0]
        }
      ]

Winter and Summer refer to the same units (temperature) for example, and so, should be rendered on the same yaxis. If you ever do two axis and hide one, the yaxis will only be correct for the series it's binded to, but not for the other, here you can see that 21 is above 27 and that it cannot be read on the yaxis.

If it was to be bind to the exact same yaxis, the min and max would be scaled to the min value of both series, and the max, the max value of both series.

Of course, in that example, you would do only one yaxis, but let's say you have another data which render anything else, and you have that exact situation.

One should then set min and max to all related yAxis to be correct.

(Btw, yaxis doesn't have show false properties, it doesn't work in 1.4.12, nor in the doc, correct way as of now is yaxis's label object show property)

[junedchhipa]

Ah! Cannot believe how I missed this!

I understood the issue now. Thinking of different ways how this can be solved. Thanks for the details.

(And, yaxis.show doesn't exist right now, it was just a proposal for how it can be given as an option)

[junedchhipa]

FIxed this in v1.5.3

A new option in

yaxis: [{
  seriesName: 'series-1' // this should match the name of the series you are targetting the scale for
}]

Also, updated the example https://apexcharts.com/javascript-chart-demos/mixed-charts/multiple-yaxis/ to demonstrate a live demo.

Let me know if this works.

[ThinkSalat]

This needs to be added to the docs! This would have saved quite a few headaches!

[aryaroudi]

FIxed this in v1.5.3

A new option in

yaxis: [{
  seriesName: 'series-1' // this should match the name of the series you are targetting the scale for
}]

Also, updated the example https://apexcharts.com/javascript-chart-demos/mixed-charts/multiple-yaxis/ to demonstrate a live demo.

Let me know if this works.

hey @junedchhipa this doesn't solve the issue, I have 3 charts and want to show 2 of them with the same YAxis and the third one with different, so I create 2 Yaxis with name series-1, series-2 then I create 3 series which the first two have the same series name (series-1) and the third different name (series-2) then I get the error in console and the chart fails to render.

We need an option like yAxisID we can not have series with the same name to match the yAxis

[Venlious]

I ran into the same issue as @aryaroudi. Perhaps allowing an array of multiple series could allow for this functionality to take place.

yaxis: [{
  seriesName: ['series-1', 'series-2']
}]

[junedchhipa]

@Venlious I would like to see what error you're getting when doing it the way mentioned in the docs

[Venlious]

Thank you for your quick response @junedchhipa! I had misunderstood the usage and came across this issue before the documentation explaining this. I have got it working now.

On an unrelated note, is it correct behaviour for the tooltip to still be connected to the individual serie?

[aryaroudi]

@Venlious Well, I finally moved to chartjs for some reason. The apex chart is awesome for simple development, the API is not powerful as Chartjs and it is not extendable, unfortunately, for example, what if you only need to extend the Line chart, not the whole Library? or fo example I needed to put an interval in showing the x-axis and it wasn't possible because it is calculating it automatically.

[aryaroudi]

@Venlious I would like to see what error you're getting when doing it the way mentioned in the docs

This is the error 😄 what if you disable the chart you are showing as TEAM B with the y-axis set show: true? this is the result

Column B without y-axis!!!

I guess you need to change your approach on the chart, the y-axis and x-axis shouldn't depend on the data series directly. This is wrong to have an obligation to have the y-axis for each data series.

The axis should be independent of the data series.

[junedchhipa]

@aryaroudi You're correct. The design decision to keep the y-axis correlate with the series was taken pretty early on. So, a big chunk of code will need a rewrite if I change this.

For your problem, there is a property yaxis.showAlways which prevents hiding of a y-axis when a series is collapsed. Thanks for the input.

[SkyEmie]

Hi,

I just encountered the same problem by having two curves on one Yaxis, and another curve on the opposite Yaxis. So I created 3 Yaxis, and hid one that corresponds to the curve that will be with the other one on the same axis, and added showAlways: true, to avoid breaking the graph without Yaxis on one side when users will hide the second curve with the hidden Yaxis. Best trick yet unfortunately :/

Thank u, wishing you good luck, your work is very useful :)

[sanket044]

Can anyone help me please. Having same issue. I want to show 2 series on 1 yaxis and other 2 on 2nd yaxis. I want to compare current month revenue vs last month's revenue, and current month order count with last month's. Please check below codepen.

https://codepen.io/sanket044/pen/ZEbxLGg

[SkyEmie]

I can make a model of this "trick" tomorrow if you wish, to just adapt it to your case

[sanket044]

Yes please it will help a lot if you can.

[sanket044]

I have solved the issue by updating version of apexcharts to 3.19 from 3.18.

[SkyEmie]

Not really a fix to do that :/

[sanket044]

Hmmm, true yesterday i thought it worked, but just checked and its not working. Seems i saw something wrong. Can you please try and let me know what happens?

[arnvidhr]

I have dynamic amount of series, depends what user selected, independently do their time index mach or not, even if they have different amount of points, I need to ensure display of for instance 10 of different series at axis A, 3 of them at Axis B, and 2 of them at axis C. I've tried to use seriesName option, and to specify same name for several series, like in example below:

  "yaxis": [
    {
      "seriesName": "s1"
    },
    {
      "seriesName": "s1",
    },
    {
      "seriesName": "s1",
    }
  ]

But they anyway getting own different axles, where everything is crapped, like this:

While show: false just hiding all this thing, after what was much harder to realize what happens, that they anyway using own Y axis for each serie, when I want all of them in single Y axis that they were drawn under single coordinates system regarding specific Y axis. Maybe I do something wrong, eg. specifying those settings?

[Staffman78]

Hi Is there a solve for this yet? I also have ran into the problem where I have dynamic number of series (half of them are column, and the other half is line). Hence I always have 2x number of series.

My problem is that all column series need to share same yaxis and all line series need to share same y-axis. So no matter how many series I have, I always want 2 and only 2 y-axis. One on each side. Is there a way to do this?

EDIT: Found this link: https://apexcharts.com/docs/chart-types/multiple-yaxis-scales/#3-series-2-scales This does exactly what I want. So please forget my question and THANKS for an awesome library!!

[arnvidhr]

If about my case, I don't remember currently mine issue, that was more than year ago, but somehow I solved it without any ApexChart modifications. I just remember that experimented with configuration and data. Might be my plan was impossible to put several series on same scale and I needed separated scales for every serie, but with same min max parameters specified and then to hide all extra scales, and somehow it worked.

I don't remember already everything very well, but maybe this can help, at least a bit. Experiments might help to solve issue like I had.

[iCHAIT]

Any updates on this? I have 3 columns and 1 line to represent. All 3 of my columns are percentage values so I want them to share the same axis. The y-axis gets depicted for each of my columns. How to hide it?

[vladimir2412]

Any updates on this? I have 3 columns and 1 line to represent. All 3 of my columns are percentage values so I want them to share the same axis. The y-axis gets depicted for each of my columns. How to hide it?

how are you do percentage?

[arnvidhr]

I don't remember how, but possible to hide any of those axles.

[vladimir2412]

yeah sure , you can , on options just delete neccessearry yaxises

[vivek65k]

To configure a chart with multiple Y-axes, you need to define the yaxis property in the chart options. Each Y-axis can have its own set of configurations, such as position, title, and scaling. Here’s a basic example:

`var options = {
  chart: {
    type: 'line'
  },
  series: [
    {
      name: 'Cumulative Receipt',
      data: [30, 40, 45, 50, 49, 60, 70]
    },
    {
      name: 'Cumulative Projected Inventory',
      data: [20, 30, 35, 40, 39, 50, 60]
    },
    {
      name: 'Week-wise Receipt',
      data: [10, 20, 25, 30, 29, 40, 50]
    }
  ],
  yaxis: [
    {
      title: {
        text: 'Cumulative Metrics'
      },
      seriesName: ['Cumulative Receipt', 'Cumulative Projected Inventory'],
      opposite: false // Left Y-axis
    },
    {
      title: {
        text: 'Weekly Metrics'
      },
      seriesName: 'Week-wise Receipt',
      opposite: true // Right Y-axis
    }
  ],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
`

OUTPUTS

for more info follow this click here