Chart.js V2: Add prefix or suffix to tooltip label

前端 未结 6 1597
情书的邮戳
情书的邮戳 2020-12-04 16:03

In Chart.js V1.0, I would add tooltipTemplate: \"<%if (label){%><%=label %>: <%}%><%= \'€\' + value %>\" to add a euro symbol as prefix

6条回答
  •  清歌不尽
    2020-12-04 16:07

    If you have a stacked bar chart (and I assume a stacked line chart) and you want to format all the data points included in a single bar with a currency symbol, you can do something like this:

        tooltips: {
            mode: 'label',
            callbacks: {
                label: function (tooltipItems, data) {
                    return '$' + tooltipItems.yLabel;
                }
            }
        },
    

    Note the value of mode.

    If you want to have finer control of the tool tip, for example include the labels as they appear the chart's legend, you can do something like this:

        tooltips: {
            mode: 'single',  // this is the Chart.js default, no need to set
            callbacks: {
                label: function (tooltipItems, data) {
                    var i, label = [], l = data.datasets.length;
                    for (i = 0; i < l; i += 1) {
                        label[i] = data.datasets[i].label + ' : ' + '$' + data.datasets[i].data[tooltipItems.index];
                    }
                    return label;
                }
            }
        },
    

提交回复
热议问题