ChartJS Hover Labels

Brad Yeager commented on Dec 3, 2019

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, 2019

You try to do:

<?php
PieChart::create([
    ...
    "options"=>[
        "tooltips"=>[
            "callbacks"=>[
                "label"=>"function(item,data){
                    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, 2019

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:

["callbacks"=>["label"=>"function(item,data){
                    var one = data.labels[item.index];
                    var two = data.datasets[0].fdata[item.index];
                    return one + ' : ' + two
                }"

KoolReport's Forum

ChartJS Hover Labels #1199

Build Your Excellent Data Report