consider 60 as zero in bar chart

user_1366195 0
Viewed 30

Hello all its there anyway in charts.js to treat 60 as zero and numbers below it to go down (like in the picture) instead of up in a bar chart?

enter image description here

chart.js bar-chart charts
1 Answers

You can use floating bars for this by instead of providing an array with values you provide an array with arrays, in which each array is a bar with a start and end value, in here you always provide 60 and the value you want:

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [
        [12, 60],
        [50, 60],
        [3, 60],
        [75, 60],
        [20, 60],
        [63, 60]
      ],
      backgroundColor: 'pink'
    }]
  },
  options: {}
}

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

user_86829830
Related