Multiple y-axes using Chart JS with data as a dictionary

Question

I'm using Flask and the library Chart JS to do graph visualization. However, I need to be able to use multiple y-axes (2 for the moment) and I can't figure out a way to make things work. I've already done it with data as lists but now that I am using dictionary-like data it seems to not fit anymore.

Here is my code:

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js" integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js" integrity="sha512-R/QOHLpV1Ggq22vfDAWYOaMd5RopHrJNMxi8/lJu8Oihwi4Ho4BRFeiMiCefn9rasajKjnx9/fTQ/xkWnkDACg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>


<div  class="chart-container">
    <canvas  id="myChart_0">
        <p> Fallback of a Graph </p>
    </canvas>
</div>
<script>  
    const dataset_0 = [{
                        data: [{x:new Date('2022-10-21T00:00:00'),y:1.0},{x:new Date('2022-12-16T00:00:00'),y:2.0},{x:new Date('2023-01-20T00:00:00'),y:2.0}],
                                barThickness: 3.0 ,
                                backgroundColor: "blue" ,
                                pointRadius: 0.0 ,
                                type: "line" ,
                yAxisID:'y',
                                borderColor: "blue" ,
                                label: "Graphs" ,
                                borderWidth: 0.0 ,
                datalabels: {color: '#FFCE56'},
                            },
    {
                        data: [{x:new Date('2022-10-21T00:00:00'),z:17.6},{x:new Date('2022-12-16T00:00:00'),z:16.9},{x:new Date('2023-01-20T00:00:00'),z:15.8}],
                                barThickness: 0.0 ,
                                backgroundColor: "red" ,
                                pointRadius: 0.0 ,
                                type: "bar" ,
                                borderColor: "red" ,
                yAxisID:'z',
                                label: "Graph" ,
                                borderWidth: 1.0 ,
                            },
    
    ];
    const data_0 = {
        datasets : dataset_0
    };
    
    const config_0 = {
    data: data_0,
    options: {
        animations:false,
        responsive: true,
        interaction: {
        },
        stacked: false,
        plugins: {
            title: {display: true, text: "None"},
            legend: { labels: { filter: function(item, chart) { return item.text; }, boxHeight : 4, boxWidth: 20}, display: true },
    },
        scales: {
        y: {
            type: 'linear',
            display: true,
            position: 'left',
            borderWidth : 0.001,
            offset: true,
            grid :{
            display:true
            },
        },
        z: {
            type: 'linear',
            display: true,
            position: 'right',
            borderWidth : 0.001,
            offset: true,
            grid :{
            display:true
            },
        },
        x1: {
            type: "time",
            display: true,
            offset: true,
            grid :{
            display:false
            },
        },
        },
    },
    };
    const myChart_0 = new Chart(document.getElementById('myChart_0'), config_0);
 
</script>

I am hoping to get one graph with its scale on the right and the other on the left, so they can get their own scale because now the data is just on the same scale and it renders badly (with that current setup, I can't even see the line chart anymore).

I was wondering whether that difficulty was coming from the fact that the dictionary-like input makes you give both the labels and data at the same time or not.

If anyone knows how to deal with that issue, plz let me know!

Answer 1

In your object for your second dataset you define your object with ax and z key. Chart.js looks for an x and y key by default. If you want to change this and make chart.js look for different keys you need to configure that in the dataset like so:

{
  data: [{x:new Date('2022-10-21T00:00:00'),z:17.6},{x:new Date('2022-12-16T00:00:00'),z:16.9},{x:new Date('2023-01-20T00:00:00'),z:15.8}],
  parsing: {
    yAxisKey: 'z'
  }
}

Or you can change the key to y and that will also solve your issue