Chartjs-Two Y axis Barchart in ChartJS

by

0👍

✅

Your axes configuration seems to follow the format from an older version of charts.js. The main change has to be that the in the options, scales is an object (not an array), and each individual axis will appear under its id as a key:

{
   options:{
      scales:{
         "y-axis-1": {
         // ...........
         },
         "y-axis-2": {
         // ...........
         },
         x: {
         // ...........
         }
      }
   }
}

Here’s a simplified version of your code for illustration purposes, non-react, with function that were not defined excluded, with invented data and category x axis rather than time:

const ctx = document.getElementById('myChart'),
    container = ctx.parentElement;

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['q','w','e','r'],
        datasets: [
            {
                label: 'Sales (in units)',
                data: [1100, 2200, 3300, 4400],
                yAxisID: "y-axis-1",
                //backgroundColor: tailwindConfig().theme.colors.blue[400],
                //hoverBackgroundColor: tailwindConfig().theme.colors.blue[500],
                barPercentage: 0.66,
                categoryPercentage: 0.66,
            },
            {
                label: 'Spend (million USD)',
                data: [3, 2, 4, 1],
                yAxisID: "y-axis-2",
                //backgroundColor: tailwindConfig().theme.colors.indigo[500],
                //hoverBackgroundColor: tailwindConfig().theme.colors.indigo[600],
                barPercentage: 0.66,
                categoryPercentage: 0.66,
            }
        ]
    },
    options: {
        layout: {
            padding: {
                top: 12,
                bottom: 16,
                left: 70,
                right: 70
            },
        },
        scales: {
            "y-axis-1": {
                //id: "y-axis-1",
                type: "linear",
                position: "left",
                ticks: {
                    maxTicksLimit: 5,
                    callback: (value) => /*formatValue*/(value)/1000 + "K (units)",
                },
            },
            "y-axis-2": {
                //id: "y-axis-2",
                type: "linear",
                position: "right",
                ticks: {
                    maxTicksLimit: 5,
                    callback: (value) =>  /*formatValue*/(value) + "M ($)",
                },
            },
            x: {
                /*  type: 'time',
                 time: {
                     parser: 'MM-DD-YYYY',
                     unit: 'month',
                     displayFormats: {
                         month: 'MMM YY',
                     },
                 }, */
                grid: {
                    display: false,
                    drawBorder: false,
                },
                position: 'bottom'
            },
        },
        plugins: {
            legend: {
                display: true,
            },
            tooltip: {
                callbacks: {
                    title: () => false, // Disable tooltip title
                    label: (context) => /*formatValue*/(context.parsed.y),
                },
            },
        },
        interaction: {
            intersect: false,
            mode: 'nearest'
        },
        animation: {
            duration: 500
        },
        maintainAspectRatio: false,
        resizeDelay: 200,
    },
});
<div style="position: relative; min-height:300px; width: 90vw" >
    <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Leave a comment