JSFiddle - React, Tailwind, and code Playground

axisY2 - Sets Various Parameters of Secondary Y Axis (Y2) - 1 | JSFiddle Sample Code

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

<div id="chartContainer1" style="height: 300px; width: 100%;">
</div>

<div id="chartContainer2" style="height: 300px; width: 100%;">
</div>

<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/chart-options/axisy2/" target="_blank" title="axisY2 - Sets Various Parameters of Secondary Y Axis (Y2) ">https://canvasjs.com/docs/charts/chart-options/axisy2/</a></div>

JavaScript

window.onload = function () {
  function generate24hData() {
    const data = [];
    const start = new Date();
    start.setHours(0, 0, 0, 0);
    for (let i = 0; i < 24; i++) {
      const point = new Date(start.getTime() + i * 3600 * 1000);
      data.push({ x: point, y: Math.random() * 100 });
    }
    return data;
  }

  function createChart(containerId, data) {
    const chart = new CanvasJS.Chart(containerId, {
      axisX: {
        title: "Time",
        valueFormatString: "HH:mm:ss",
      },
      axisY: {
        title: "Primary Y",
      },
      axisY2: [
        {
          title: "Y2-A",
          lineColor: "red",
          labelFontColor: "red",
          tickColor: "red",
          labelFontSize: 12,
        },
        {
          title: "Y2-B",
          lineColor: "blue",
          labelFontColor: "blue",
          tickColor: "blue",
          labelFontSize: 12,
        },
      ],
      data: data,
      legend: {
        cursor: "pointer",
        itemclick: function (e) {
          e.dataSeries.visible = !e.dataSeries.visible;
          const otherChart = e.chart === chart1 ? chart2 : chart1;
          otherChart.options.data.forEach((ds) => {
            if (ds.name === e.dataSeries.name) {
              ds.visible = e.dataSeries.visible;
            }
          });
          updateAxisVisibility(chart1);
          updateAxisVisibility(chart2);
          chart1.render();
          chart2.render();
          
          //Reset margin
          chart1.axisY[0].set("margin", null);
        },
      },
    });

    chart.options.axisY2.forEach((axis) => {
      axis._original = {
        lineColor: axis.lineColor,
        labelFontColor: axis.labelFontColor,
        tickColor: axis.tickColor,
      };
    });

    return chart;
  }

  function updateAxisVisibility(chart) {
    const usedAxes = [false, false];
    chart.options.data.forEach((series) => {
      if (
        series.axisYType === "secondary" &&
        series.visible &&
       ...