[Chartjs]-ChartJS horizontal bar with numbers on both scales

by

1👍

✅

This is because chart.js still thinks it needs to be a category scale so you will need to override that. If you do that it shows up fine.

A second thing, to make the ticks bigger you need to specify the size in the font object, the font does not accept a number. For all font properties you can specify there you can read the docs here

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [{
          "x": 86,
          "y": 20
        },
        {
          "x": 255,
          "y": 21
        },
        {
          "x": 207,
          "y": 34
        }
      ],
      backgroundColor: 'pink'
    }]
  },
  options: {
    indexAxis: "y",
    scales: {
      y: {
        type: 'linear',
        ticks: {
          color: "blue",
          font: {
            size: 24
          },
        },
      }
    }
  }
}

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.6.0/chart.js"></script>
</body>

Leave a comment