Chartjs-Chart.js configuration

by

0👍

You are trying to define your scales in V2 syntax while using V3, I advise reading the migration guide first if you are transfering from V2.

To make the bars a bit thicker you can increase the barPercentage and categoryPercentage to 1 but this will remove all the space between the bars. The only other option to make them bigger is by giving the chart actually more space by making the canvas bigger using CSS

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'pink',
        barPercentage: 1,
        categoryPercentage: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        backgroundColor: 'orange',
        barPercentage: 1,
        categoryPercentage: 1
      }
    ]
  },
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          autoSkip: false
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Leave a comment