'How to add labels for only some of the data point?

I'm trying to create a chart.js scatter plot with a set of points with values of 0 to 100 percent. I'd like to have 0 be a red point and 100 be blue and have a gradient between the two. I'm able to get the colors I want, but is it possible to get labels for just a few points like 0, 25, 50, 75, and 100? I don't want a label for all 101 possible values just enough for users to understand that it's a spectrum.

I considered trying to add two datasets to the chart one for the real data with no labels and another with not data but the five labels I want. Would this work?

chart.js


Solution 1:[1]

Yes, you can specify the ticks you want with the afterBuildTicks hook. You can also specify the count property in the ticks this will make it so chart.js generates that many ticks but you dont have control over the values of those ticks:

const data = [];

for (let i = 0; i < 100; i++) {
  data.push({
    x: i,
    y: i
  })
}

const options = {
  type: 'scatter',
  data: {
    datasets: [{
      label: '# of Votes',
      data: data,
      borderColor: 'orange',
      backgroundColor: 'orange'
    }]
  },
  options: {
    scales: {
      x: {
        afterBuildTicks: (a) => (a.ticks = [{
          value: 0
        }, {
          value: 25
        }, {
          value: 50
        }, {
          value: 75
        }, {
          value: 100
        }]),
        ticks: {
          count: 5, // limit to 4 ticks but let chart.js decide what tose ticks are
        }
      }
    }
  }
}

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 LeeLenalee

Related Questions