[ask] add label on pie chart

[edwinnsan]

Hello guys, im already success to create pie chart, this is the result

but i want add label inside chart like this

can we do thing like this in chart js?thanks

[yasinnoori]

Use the data label plugin.

[yasinnoori]

First add the script file

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.5.0"></script>

then

add these lines of code to your optionsRaw in Controller:
'plugins' => [
'datalabels' => [
'borderColor' => 'white',
'borderRadius' => 25,
'borderWidth' => 2,
'color' => 'white',
'formatter' => 'Math.round'
]
],

[edwinnsan]

thanks for your answer, but when i put this script
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.5.0"></script>

i got an error like this

do you know why this happen?Thanks!

[yasinnoori]

This is because of the compatibility issue.
Put this version of chart js

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.min.js"></script>

[edwinnsan]

already tried it, but get the another error like this..

this is because the script or not?
Thanks again btw

[yasinnoori]

Are you working with Ajax Call?

[yasinnoori]

Also, add your code snippet to better communicate

[edwinnsan]

No im not using ajax for this chart..
and this is my code

[edwinnsan]

then i get this error

[yasinnoori]

change the labels array inside plugins to datalabels
AND
also if you are trying to set font-size to datalabels use "font.size" instead of "FontSize".

[edwinnsan]

i already tried to change labels to datalabels, but i dont find the font-size, because im not setting it. why this happen

[yasinnoori]

The third error you faced is because of the Hover attribute try to remove it and test it again or try to work it in events.

Try to remove any other templates styles or scripts just keep chartjs and datalabels plugin in your blade files then test it.

There may be some compatibility issues.

[edwinnsan]

ah, now i got no error.. but still i cant see the label.. still like this

and this is my optionraw code

[yasinnoori]

a tiny issue when you open optionsRaw like a json keep all the json braces everywhere inside the optionsRaw function but if you treat to use it like array keep it all array.
as this

[edwinnsan]

oh because i ever try this code on my other chart and success..like this

but i try my code into code like yours, but still no result