score:0

Accepted answer

you can define the option pointbackgroundcolor on the dataset. when the user clicks on a point, you recreate pointbackgroundcolor, but now use an array that contains the desired color for each point.

please take a look at your amended code below and see how it works.

new chart('mychart', {
  type: 'scatter',
  data: {
    datasets: [{
      label: '# of votes',
      data: [{ x: -10, y: 0 }, { x: 0, y: 10 }, { x: 10, y: 5 }, { x: 0.5, y: 5.5 }],
      pointbackgroundcolor: '#ddd',
      pointradius: 5,
    }]
  },
  options: {
    onclick: (event, elements, chart) => {
      const dataset = chart.data.datasets[0];     
      dataset.pointbackgroundcolor = dataset.data.map((v, i) => i == elements[0]?.index ? '#fa6400': '#ddd');
      chart.update();
    },
    scales: {
      y: {
        beginatzero: true
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.0/chart.min.js"></script>
<canvas id="mychart" width="400" height="200"></canvas>


Related Query

More Query from same tag