CanvasJS having a seperately scaled Y-Axis

Question

I'm still a bit new to CanvasJS, but one thing I've been struggling with is trying to have separately scaled Y-Axis's for each of my lines in a spline chart.

I'm hoping someone can point out what I'm missing. So far I've spent the day working on this and haven't been able to get very far. I'm hoping it's something small.

window.onload = function () {

        var chart = new CanvasJS.Chart("timeline", {
    theme: "light2",
    animationEnabled: true,
    title: {
        text: "Bowling stats over time"
    },
    toolTip: {
        shared: true
    },
    legend: {
        cursor: "pointer",
        itemclick: toggleDataSeries
    },
    data: [{
        type: "spline",
        visible: true,
        showInLegend: true,
        yValueFormatString: "##",
        name: "Pinfall",
        yAxisID: 'y2',
        dataPoints: [
            { label: "2023-12-07", y: 151 },
            { label: "2023-12-11", y: 103 },
            { label: "2023-12-14", y: 156 },
            { label: "2023-12-15", y: 132 }
        ]
    }, {
        type: "spline",
        visible: true,
        showInLegend: true,
        yValueFormatString: "##",
        name: "Strikes",
        yAxisID: 'y',
        dataPoints: [
            { label: "2023-12-07", y: 2 },
            { label: "2023-12-11", y: 1 },
            { label: "2023-12-14", y: 4 },
            { label: "2023-12-15", y: 2 }
        ]
    }, {
        type: "spline",
        visible: true,
        showInLegend: true,
        yValueFormatString: "##",
        name: "Spares",
        yAxisID: 'y',
        dataPoints: [
            { label: "2023-12-07", y: 4 },
            { label: "2023-12-11", y: 1 },
            { label: "2023-12-14", y: 2 },
            { label: "2023-12-15", y: 3 }
        ]
    }, {
        type: "spline",
        visible: true,
        showInLegend: true,
        yValueFormatString: "##.00",
        name: "First Throw Avg",
        yAxisID: 'y',
        dataPoints: [
            { label: "2023-12-07", y: 8.7 },
            { label: "2023-12-11", y: 6.4 },
            { label: "2023-12-14", y: 7.9 },
            { label: "2023-12-15", y: 7.7 }
        ]
    }],
    responsive: true,
  options: {
    scales: {
      yAxes: [{
        id: 'y',
        stacked: false,
        position: 'left',
        type: 'linear',
        scaleLabel: {
          display: true,
        }
      }, {
        id: 'y2',
        stacked: false,
        position: 'right',
        type: 'linear',
        scaleLabel: {
          display: true,
        }
      }]
    }
  }
});
chart.render();

    function toggleDataSeries(e) {
        if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible ){
            e.dataSeries.visible = false;
        } else {
            e.dataSeries.visible = true;
        }
        chart.render();
    }
}

https://jsfiddle.net/0mp3gkyz/

In my sample code I'm just trying to use two separate yAxis controls for the sake of testing, but ideally, I'd like to have a seperate scaled access per line.

Answer 1

Your code basically uses CanvasJS but not Chart.js.

new CanvasJS.Chart("timeline", {
   ...
}

Part of the chart configuration however (in particular options) is borrowed from Chart.js. Note that these are different products with their own syntax each.

To solve your problem, please take a look at the CanvasJS how-to page Creating Chart with Multiple Y Axis.