[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

[Mohammad-Yasin-Noori]

Use the data label plugin.

[Mohammad-Yasin-Noori]

First add the script file

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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/[email protected]"></script>

i got an error like this

do you know why this happen?Thanks!

[Mohammad-Yasin-Noori]

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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

[Mohammad-Yasin-Noori]

Are you working with Ajax Call?

[Mohammad-Yasin-Noori]

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

[Mohammad-Yasin-Noori]

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

[Mohammad-Yasin-Noori]

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

[Mohammad-Yasin-Noori]

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

[Mohammad-Yasin-Noori]

Check for the anchor (alignment) and the colors if there is not any error in console.

[edwinnsan]

i set same option like yours, but still not get the datalabel in the chart

[Mohammad-Yasin-Noori]

Any error in your browser`s console?

[edwinnsan]

no, there is no error in my console..

[saulob]

Any way to make it work on the latest version?

ChartJs 3.5 and plugin 2.0?