fxcosta / laravel-chartjs

Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library
486 stars 112 forks source link

[ask] add label on pie chart #82

Open edwinnsan opened 5 years ago

edwinnsan commented 5 years ago

Hello guys, im already success to create pie chart, this is the result screenshot from 2019-01-28 10-54-50

but i want add label inside chart like this screenshot from 2019-01-28 10-55-03

can we do thing like this in chart js?thanks

Mohammad-Yasin-Noori commented 5 years ago

Use the data label plugin.

Mohammad-Yasin-Noori commented 5 years ago

First add the script file

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 commented 5 years ago

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 screenshot from 2019-02-06 10-18-49

do you know why this happen?Thanks!

Mohammad-Yasin-Noori commented 5 years ago

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

edwinnsan commented 5 years ago

already tried it, but get the another error like this.. screenshot from 2019-02-06 10-25-52

this is because the script or not? Thanks again btw

Mohammad-Yasin-Noori commented 5 years ago

Are you working with Ajax Call?

Mohammad-Yasin-Noori commented 5 years ago

Also, add your code snippet to better communicate

edwinnsan commented 5 years ago

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

screenshot from 2019-02-06 11-56-46 screenshot from 2019-02-06 11-57-01

edwinnsan commented 5 years ago

then i get this error screenshot from 2019-02-06 12-00-40

Mohammad-Yasin-Noori commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

ah, now i got no error.. but still i cant see the label.. still like this screenshot from 2019-02-06 12-13-40

and this is my optionraw code screenshot from 2019-02-06 12-14-10

Mohammad-Yasin-Noori commented 5 years ago

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 code

edwinnsan commented 5 years ago

oh because i ever try this code on my other chart and success..like this screenshot from 2019-02-06 12-24-55

but i try my code into code like yours, but still no result screenshot from 2019-02-06 12-25-26

Mohammad-Yasin-Noori commented 5 years ago

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

edwinnsan commented 5 years ago

screenshot from 2019-02-06 12-57-37

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

Mohammad-Yasin-Noori commented 5 years ago

Any error in your browser`s console?

edwinnsan commented 5 years ago

no, there is no error in my console..

saulob commented 3 years ago

Any way to make it work on the latest version?

ChartJs 3.5 and plugin 2.0?