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

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
edited chart

0👍

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.

Leave a comment