[Solved]-Chartjs v2 - format tooltip for multiple data sets (bar and line)-Chart.js

score:38

you could achieve that using the following tooltips callback function ...

callbacks: {
    label: function (t, d) {
        if (t.datasetindex === 0) {
            return '$' + t.ylabel.tofixed(2)
        } else if (t.datasetindex === 1) {
            return math.round(+t.ylabel.tostring().replace(/(\d{2})(.*)/, '$1.$2')) + 'm';
        }
    }
}

ᴅᴇᴍᴏ

var ctx = document.getelementbyid("canvas").getcontext("2d");
var mychart = new chart(ctx, {
    type: 'bar',
    data: {
        labels: ["january", "february", "march", "april", "may"],
        datasets: [{
            type: 'line',
            label: "sales",
            data: [144.36534, 146.42534, 145.23534, 147.19534, 145],
            fill: false,
            bordercolor: '#ec932f',
            backgroundcolor: '#ec932f',
            tension: 0,
            yaxisid: 'y-axis-2'
        }, {
            type: 'bar',
            label: "visitor",
            data: [22345343, 23345343, 24345343, 25345343, 230245343],
            backgroundcolor: '#71b37c',
            yaxisid: 'y-axis-1'
        }]
    },
    options: {
        responsive: false,
        tooltips: {
            mode: 'index',
            intersect: false,
            callbacks: {
                label: function (t, d) {
                    if (t.datasetindex === 0) {
                        return '$' + t.ylabel.tofixed(2);
                    } else if (t.datasetindex === 1) {
                        if (t.ylabel.tostring().length === 9) {
                            return math.round(+t.ylabel.tostring().replace(/(\d{3})(.*)/, '$1.$2')) + 'm';
                        } else return math.round(+t.ylabel.tostring().replace(/(\d{2})(.*)/, '$1.$2')) + 'm';
                    }
                }
            }
        },
        scales: {
            yaxes: [{
                id: "y-axis-1",
                position: "left"
            }, {
                id: "y-axis-2",
                position: "right"
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
<canvas id="canvas" width="400" height="190"></canvas>

ɢʀᴜɴᴛ 30087

score:0

thanks, grunt! but since my datasets could me mixed it's better to use the yaxisid to check for the correct dataset.

            tooltips: {
                callbacks: {
                    label: function (tooltipitem, details) {
                        if (details.datasets[tooltipitem.datasetindex].yaxisid == "$") {
                            let dataset = details.datasets[tooltipitem.datasetindex];
                            let currentvalue = dataset.data[tooltipitem.index];
                            return dataset.label + ": " + currentvalue.tofixed(2) + " $";
                        } else {
                            let dataset = details.datasets[tooltipitem.datasetindex];
                            let currentvalue = dataset.data[tooltipitem.index];
                            return dataset.label + ": " + currentvalue +" pieces";
                        }
                    }
                }
            }

yaroslav bershadskyy 19

score:2

try using below code!

   let  doughnutforsavingcount = {
        labels: [
          intl.formatmessage({ id: 'guarantee' }),
          intl.formatmessage({ id: 'ilas' }),
          intl.formatmessage({ id: 'no idea' })
        ],

        datasets: [
          /* outer doughnut data starts*/

          {
            label: 'graph1',
            data: [
              _.get(getclientsavingilaspolicydata[0], 'countwithguaranttee') >
                0 &&
              _.get(getclientsavingilaspolicydata[0], 'totalwithguarantee') ===
                0
                ? 0.1
                : _.get(getclientsavingilaspolicydata[0], 'totalwithguarantee'),
              _.get(getclientsavingilaspolicydata[0], 'countwithilas', 0) > 0 &&
              _.get(getclientsavingilaspolicydata[0], 'totalwithilas') === 0
                ? 0.1
                : _.get(getclientsavingilaspolicydata[0], 'totalwithilas'),
              _.get(getclientsavingilaspolicydata[0], 'countnoidea', 0) > 0 &&
              _.get(getclientsavingilaspolicydata[0], 'totalwithnoidea') === 0
                ? 0.1
                : _.get(getclientsavingilaspolicydata[0], 'totalwithnoidea')
            ],
            backgroundcolor: ['#8c1aff', '#bf80ff', '#e9e9e9'],
            hoverbackgroundcolor: ['#8c1aff', '#bf80ff', '#e9e9e9']
          },
          /* outer doughnut data ends*/

          /* inner doughnut data starts*/
          {
            label: 'graph2',
            data: [
              _.get(getclientsavingilaspolicydata[0], 'countwithguaranttee'),
              _.get(getclientsavingilaspolicydata[0], 'countwithilas'),
              _.get(getclientsavingilaspolicydata[0], 'countnoidea')
            ],
            backgroundcolor: ['#8c1aff', '#bf80ff', '#e9e9e9'],
            hoverbackgroundcolor: ['#8c1aff', '#bf80ff', '#e9e9e9']
          }
          /* inner doughnut data ends*/
        ],
        borderwidth: [1]
      };



     let doughnutforsavingcountconfig = {
          cutoutpercentage: 70,
          legend: {
            display: true,
            position: 'bottom',
            labels: {
              fontcolor: '#34a0dc',
              fontsize: 10,
              fontfamily: 'helvetica',
              boxwidth: 10,
              usepointstyle: true
            }
          },
          responsive: true,
          plugins: {
            datalabels: {
              display: false
            }
          },
          tooltips: {
            enabled: true,
            //*****add for reference********** */
            callbacks: {
              label: function(tooltipitems, data) {
                if (tooltipitems.datasetindex) {
                  var label = data.labels[tooltipitems.index] || '';
                  var currentvalue =
                    data.datasets[tooltipitems.datasetindex].data[
                      tooltipitems.index
                    ];
                  if (label) {
                    label += ': ';
                  }
                  label += currentvalue == '0.1' ? '0' : currentvalue;
                  return label;
                } else {
                  var label = data.labels[tooltipitems.index] || '';
                  var currentvalue =
                    data.datasets[tooltipitems.datasetindex].data[
                      tooltipitems.index
                    ];
                  if (label) {
                    label += ': ';
                  }
                  label += intl.formatmessage({ id: 'hkd' }) + ' ';
                  label +=
                    currentvalue == '0.1'
                      ? '0'
                      : currentvalue
                          .tostring()
                          .replace(/\b(?=(\d{3})+(?!\d))/g, ',');
                  return label;
                }
              }
            }
          }
        };

neeraj sisodiya 21

[Solved]-Chartjs v2 - format tooltip for multiple data sets (bar and line)-Chart.js

Related Query

More Query from same tag