-1

Edit: This appears to only be an issue if you are using typescript. Thank you @LeeLenalee

I recently upgraded package versions

chart.js -- 3.2.1 -> 3.7.0

react-chartjs-2 -- 3.0.3 -> 4.0.1

Which broke my line chart:

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

The docs are fairly difficult to find this info. Even after I figured out how to change it and I look back at the docs I still can't make much sense of them.

Edit: Typescript error enter image description here

Ryan E.
  • 977
  • 8
  • 16
  • 1
    This works fine: https://jsfiddle.net/Leelenaleee/o8catw7L/, Also tried it in my local react-chartjs-2 project and also worked fine – LeeLenalee Jan 19 '22 at 14:34
  • Thank you for the follow up, this appears to be a typescript only issue then. – Ryan E. Jan 19 '22 at 15:49
  • Updated question to more obviously show this is a typescript issue. Would appreciate removing your negative vote. – Ryan E. Jan 19 '22 at 15:52

1 Answers1

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: ...,
   }] 
  }
 />
Ryan E.
  • 977
  • 8
  • 16