How to Modify ToolTips in Yii2 using dosamigos\chartjs\ChartJs?

问题

I want to change the tooltip of a Chart I made in Yii2 using dosamigos\chartjs\ChartJs which is based on Chart.js

My problem comes when I try to modify the Tooltip part of the chart. I am unable to achieve it. I have tried using multiTooltipTemplate, tooltips.callback and tooltipTemplate properties but I have not succeeded yet.

Below are 2 pictures of my Chart, What I want to achive is this:

The ToolTip of the inner chart (first image) should say something like this: "A: 119 Products" or "B: 230 Products" or "C: 540 products" depending on which section of the chart you are in (red,blue,yellow).
The Tooltip of the outer chart (second image) should say something like "A: $5,966,671.64" or "B: $1,120,022.50" or "C: $966,671.64" depending on which color you are in (red,blue,yellow).

Bellow is the code I am using to generate the chart in my view:

<?= ChartJs::widget([
 'type' => 'pie',
 'options' => [
     'height' => 200,
     'width' => 600,
     'responsive' => true,
     'animation'=> true,
     'barValueSpacing' => 5,
     'barDatasetSpacing' => 1,
     //'tooltipFillColor'=> "rgba(0,0,0,0.8)",
     //'multiTooltipTemplate' => "<%= Value %> - <%= value %>",
     // String - Template string for single tooltips,
     //'tooltipTemplate'=>  "<%if (label){%><%=label%>: <%}%><%= value %>",

     // String - Template string for single tooltips,
     //'multiTooltipTemplate'=>  "<%= value %>",

     'tooltips'=> [
      'callbacks'=> [
          'title' =>  '***** My custom label title *****'           

          ]
    ],

],
 'data' => [
       'datasets' => [
          [
              'label' => 'Valor Inventario',
              'data'=> [$valorInventarioA, $valorInventarioB, $valorInventarioC],
              'backgroundColor'=> [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)'
              ],
              'borderColor'=> [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)'
              ]
          ],
          [
                 'label' => 'Cantidad Items',
                'data'=> [$grupoACount, $grupoBCount, $grupoCCount],
             'backgroundColor'=> [
                 'rgba(255, 99, 132, 0.2)',
                 'rgba(54, 162, 235, 0.2)',
                 'rgba(255, 206, 86, 0.2)'
             ],
             'borderColor'=> [
                 'rgba(255,99,132,1)',
                 'rgba(54, 162, 235, 1)',
                 'rgba(255, 206, 86, 1)'
             ]
          ]
      ],

       // These labels appear in the legend and in the tooltips when hovering different arcs
       'labels' => [
           'A',
           'B',
           'C'
       ]
 ]
]);?>

I would appreciate any help

回答1:

To modify the tooltip, you can use a callback function for tooltips label, as such :

...
'clientOptions' => [
    'tooltips'=> [
         'callbacks'=> [
             'label'=> new JsExpression("function(t, d) {
                     var label = d.labels[t.index];
                     var data = d.datasets[t.datasetIndex].data[t.index];
                     if (t.datasetIndex === 0)
                     return label + ': ' + data + ' Products';
                     else if (t.datasetIndex === 1)
                     return label + ': $' + data.toLocaleString();
              }")
          ]
     ],
     ...
],
...

note :

correct property name for chart options is clientOptions
JsExpression class should be used to compile the JS callback function

来源：https://stackoverflow.com/questions/46962841/how-to-modify-tooltips-in-yii2-using-dosamigos-chartjs-chartjs

标签

php

yii2

chart.js