Range grouping data and label in Chartjs

Question

So, I would like to range my data and labels in Chartjs so that I can represent them properly. Please take a look at this reference which exactly shows what I am trying to do.

You can see that the data is grouped and ranged according to the order totals. The bar is then representing the total order counts.

One thing to notice here is that this data will change when the specified date range changes. However, the chart should always show 6 labels at max even if the date range changes, meaning, the data set changes (increases).

Now, I would like to know if this is possible directly in Chartjs where I add some funky option value to make it work automagically or, as I am working with PHP in the backend, there's a way in PHP where I can dynamically chunk these elements by only knowing the date range.

Please let me know if more explanation is required. Any help would be appreciated.

PS: I have database access and I have all the data required to display in the chart, just need to display it in the said format.

score 0 · Answer 1 · answered Aug 11 '21 at 10:35

You can use the tick callback to filter out ticks:

var options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
        backgroundColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7, 7, 11, 5, 8, 3, 7, 7, 11, 5, 8, 3, 7, 7, 11, 5, 8, 3, 7],
        backgroundColor: 'lime'
      }
    ]
  },
  options: {
    scales: {
      x: {
        ticks: {
          callback: function(value, index, values) {
            let skips = values.length / 6;

            return index % skips === 0 ? this.getLabelForValue(value) : ''
          }
        }
      }
    }
  }
}

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

Thanks for your help however it doesn't have any range. In my OP you can see the labels are ranged eg $62-$92 and then the orders with their totals ranging between $62-$92 will fall in that group. — Adictonator, Aug 11 '21 at 10:38
Might want to clear up your question because the only thing I make out of it is that you want to show max 6 labels even when dataset increases which does happen in my example — LeeLenalee, Aug 11 '21 at 10:40
yeah what do you want with range, you only show a picture of a chart, no code of you trying anything to solve it on your own and then range should make it magically clear what you want? Even if your range of data changes so it becomes bigger this works because it reevaluates the callback — LeeLenalee, Aug 11 '21 at 10:44

Range grouping data and label in Chartjs

1 Answers1