Chartjs-Double Y Axis + Bar chart combo

by

0👍

ChartJS supports multi-axis combined charts.

You can assign which Y-axis or X-axis you want to assign your dataset using xAxisID, yAxisID or rAxisID (for radial charts).

Here’s the link to the docs.
https://www.chartjs.org/docs/latest/axes/

I also created a sample chart similar to the screenshot you shared with the bar chart and red line chart sharing the same y-axis.

var ctx = document.getElementById("myChart");
var data = {
       datasets: [
         {
            type: 'line',
            data: [
              {
                  x: '2022-03-24 23:55:30',
                  y: 50
              },
              {
                  x: '2022-03-24 23:56:28',
                  y: 105
              },
              {
                  x: '2022-03-24 23:57:10',
                  y: 25
              },
              {
                  x: '2022-03-24 23:58:10',
                  y: 80
              },
              {
                  x: '2022-03-24 23:59:10',
                  y: 24
              },
              {
                  x: '2022-03-25 00:00:00',
                  y: 160
              },
              {
                  x: '2022-03-25 00:01:00',
                  y: 11
              },
            ],
            borderColor: '#FC4255',
            backgroundColor: '#FC4255',
            yAxisID: "left-y-axis",
            label: "left-y-axis",
            order: 2
        },
        {
            type: 'line',
            data: [
              {
                  x: '2022-03-24 23:55:30',
                  y: 10
              },
              {
                  x: '2022-03-24 23:56:28',
                  y: 20
              },
              {
                  x: '2022-03-24 23:57:10',
                  y: 30
              },
              {
                  x: '2022-03-24 23:58:10',
                  y: 40
              },
              {
                  x: '2022-03-24 23:59:10',
                  y: 50
              },
              {
                  x: '2022-03-25 00:00:00',
                  y: 60
              },
              {
                  x: '2022-03-25 00:01:00',
                  y: 70
              },
            ],
            borderColor: '#2d78ce',
            backgroundColor: '#2d78ce',
            yAxisID: "right-y-axis",
            label: "right-y-axis",
            order: 2
        },
        {
            type: 'bar',
            data: [
              {
                  x: '2022-03-24 23:55:30',
                  y: 10
              },
              {
                  x: '2022-03-24 23:56:28',
                  y: 20
              },
              {
                  x: '2022-03-24 23:57:10',
                  y: 30
              },
              {
                  x: '2022-03-24 23:58:10',
                  y: 40
              },
              {
                  x: '2022-03-24 23:59:10',
                  y: 50
              },
              {
                  x: '2022-03-25 00:00:00',
                  y: 60
              },
              {
                  x: '2022-03-25 00:01:00',
                  y: 70
              },
            ],
            borderColor: '#8e90ab',
            backgroundColor: '#8e90ab',
            yAxisID: "left-y-axis",
            label: "bar",
            order: 3
        },
  ]
}
var config = {
  type: 'bar',
  data,
  options:{
    scales: {
      x:{
        type: 'time',
        time: {
          round: 'minute',
          stepSize: 100
        }
      },
      'left-y-axis': {
        type: 'linear',
        position: 'left'
      },
      'right-y-axis': {
        type: 'linear',
        position: 'right',
        grid: {
          drawOnChartArea: false,
        }
      }
    },
    responsive: true,
    barPercentage: 0.4,
    maintainAspectRatio: false,
  }
}



var chart = new Chart(ctx,config);
body {
  background-color: #2c2f42;
}
<!-- Chart.js v3.7.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>

<body>
  <canvas id="myChart" width="400" height="400"></canvas>
</body>

Leave a comment