Chartjs-How to make Chart JS ignore the scale between DatasSets

by

0👍

You can define a multi-axis chart, similar to this sample.

Please take a look at the following runnable code and see how it works.

new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
        label: "# Negócios Fechados",
        data: [8, 5, 3, 12],
        backgroundColor: "rgba(255, 99, 132, 1)",
        yAxisID: 'y2',
      },
      {
        label: "# Valor Total",
        data: [16000, 25000, 4500, 36000],
        backgroundColor: "rgba(54, 162, 235, 1)"
      },
      {
        label: "# Ticket Médio",
        data: [2000, 5000, 1500, 3000],
        backgroundColor: "rgba(255, 206, 86, 1)"
      }
    ]
  },
  options: {
    scales: {
      y: {
        position: 'right',
        beginAtZero: true
      },
      y2: {
        grid: {
          drawOnChartArea: false
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Leave a comment