0

I'm displaying a Chart.js doughnut chart via react-chartjs-2 in React, and by default, there are these line-box things showing for each doughnut section. Here's an example:

enter image description here

What are these line-box things called, and how do I turn them off?

Also, for what it's worth, they don't seem to show up by default in the base Chart.js library, but they show up for doughnut (and probably pie) charts in the react-chartjs-2 npm package. I've searched and searched, and tried toggling a bunch of options for the legend, legend labels and tooltips, but to no avail. I cannot figure out how to turn these off. Thank you for your help.

HartleySan
  • 7,404
  • 14
  • 66
  • 119
  • 1
    Are you sure its not a plugin you are using, because when i try it with that lib it wont pop up (https://codesandbox.io/s/fast-feather-kc32r?file=/src/Graph.js) – LeeLenalee Mar 29 '21 at 20:02
  • Thanks a lot for confirming that, LeeLenalee. You're probably right. Sorry about that. I came into this project with a lot of things already established, so this is probably something that someone else did and I need to start asking around. Thanks again. – HartleySan Mar 29 '21 at 20:09

1 Answers1

0

Thanks again to LeeLanalee for pointing me in the right direction.

Unbeknownst to me, there was a Chart.js global plugin set up for all the doughnut charts called chartjs-plugin-piechart-outlabels (https://www.npmjs.com/package/chartjs-plugin-piechart-outlabels). As per following SO post, I was able to disable the line-box labels for specific instances of the doughnut charts (in React) as follows:

ChartJs - Pie Chart - how to remove labels that are on the pie chart

options={ {
    plugins: {
        outlabels: false
    }
} }

Thanks again!

HartleySan
  • 7,404
  • 14
  • 66
  • 119