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

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) {
                        // 1. Toggle clicked chart
                        // 2. Get other chart
                        // 3. Find matching series in other chart by name and toggle same way
                        // 4. Update axis styling in both charts
                        // 5. Render charts

                        //1
                        e.dataSeries.visible = !e.dataSeries.visible;

                        // 2
                        const otherChart = e.chart === chart1 ? chart2 : chart1;

                        // 3
                       ...