Chartjs : is it possible to add border to the datalabel text within the dougnut chart react

Question

Is it possible to add border color to the text.

https://codesandbox.io/s/react-chartjs-2-doughnut-pie-chart-forked-j3dhsn?file=/src/index.js

Answer 1

You can print text outline/stroke using textStrokeColor and textStrokeWidth like this. see the full documentation

datalabels: {
  color: "#fff",
  borderColor: "#000",
  textStrokeColor: 'black', // <-- added this
  textStrokeWidth: 5, // <-- added this
  font: {
     size: 14,
     weight: "bold"
  }
}

See the edited codesandbox. this will output chart like this

Answer 2

The only thin missing in your code is datalabels.borderWidth

datalabels: {
  color: "#fff",
  borderColor: "#000",
  borderWidth: 2, // <- add this 
  font: {
    size: 14,
    weight: "bold"
  }
}

Please take a look at your amended CodeSanbox to see the result.