(Typescript) How do you set pointRadius, pointHoverRadius, ect in ChartJs 3.7.0 & react-chart-js-2 4.0.1

by

👍:2

It seems there is multiple ways to set the point options. For me I was able to set the global point options in options.elements.point.

 <Line
  data: {...}
  options: {
    elements: {
      point: {
        radius: 0,
        hoverRadius: 5,
        hitRadius: 20,
        backgroundColor: ...,
      }
    }
  }
 />

These options can also be set (or override global settings) in your dataset object as well for each line.

 <Line
  data: {
   datasets: [{
     pointRadius: 0,
     pointHoverRadius: 5,
     pointHitRadius: 20,
     pointBackgroundColor: ...,
   }] 
  }
 />

Leave a comment