Search code examples
javascriptapexcharts

How to set min value in multi yaxis of apexchart


I have been trying to automatically define and set a min value on yaxis of Apexchart. It works fine with a single yaxis, however once I add the 2nd axis, the min value is set to 0. In the example below, I log the min and max values in the console.

This could be a bug in the charting library but I wonder if there could be any workaround. If I set a min value manually, it works fine.

Codepen: https://codepen.io/Kogelet/pen/rNmMgJE?editors=1111

console.clear();

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "line"
  },
  series: [
    {
      name: "Series 1",
      data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    },
    {
      name: "Series 1",
      data: [20, 30, 40, 50, 60, 70, 80, 90, 100, 110]
    }
  ],
  yaxis: [
    {
      opposite: false,
      min: (min) => {
        console.log('Min:', min);
        return min; 
      },
      max: (max) => {
        console.log('Max:', max);
        return max; 
      }
    },
    {
      opposite: true,
      min: (min) => {
        console.log('Min:', min);
        return min; 
      },
      max: (max) => {
        console.log('Max:', max);
        return max; 
      }
    }
  ]
};

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

chart.render();


Solution

  • I got this resolved with a custom function.

    min: (min) => {
            min = Math.min(...options["series"][0]["data"]);
            console.log("Min:", min);
            return min;
          }