KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.

ChartJS Hover Labels #1199

Closed Brad Yeager opened this topic on on Dec 3 - 2 comments

Brad Yeager commented on Dec 3

I have tried to no avail. Is there anyway to pass in labels for a pie chart using ChartJS? Here's an example https://puu.sh/ELcIb/61faa5f27e.png I pass in an array of columns 'answer' and 'responses' The hover tip always shows "responses: 49" as an example. But I want it to show the answer or label so '7151A: 49' for example. Is there anyway to make the pie and donut chart use the first column key as the label?

Here's what I'm passing in as an example:

array:23 [▼
  0 => array:2 [▼
    "answer" => "7088B"
    "responses" => 1
  1 => array:2 [▼
    "answer" => "7089B"
    "responses" => 4
  2 => array:2 [▼
    "answer" => "7093B"
    "responses" => 1
KoolReport commented on Dec 4

You try to do:

                    return data.datasets[item.datasetIndex].fdata[0]+" : " + data.datasets[item.datasetIndex].fdata[1];

Let us know if it works.

Brad Yeager commented on Dec 4

Thanks. It was a little off for my needs and had a syntax error on the " : ", but I wasn't aware of the callback and you pointed me in the right direct. If anyone needs it, my personal implementation ended up being:

                    var one = data.labels[item.index];
                    var two = data.datasets[0].fdata[item.index];
                    return one + ' : ' + two

KoolReport Is Free and Open-Source!

KoolReport is a professional php reporting framework which saves you tons of time to construct dynamic data report & dashboard.

  • Connect to various datasources such as MySQL, SQL Server, MongoDB or even from CSV or Excel file.
  • Contain series of powerful built-in data processes for your data manipulation.
  • Generate stunning charts and graphs to help you communicate data insights to your audiences effectively.
  • Integrate seamlessly with any php frameworks such as Laravel, CodeIgniter, Symfony.
Download Now and register our tutorials to get started!

Download KoolReport
help needed