Chart.js tooltipTemplate not working

后端 未结 1 706
[愿得一人]
[愿得一人] 2021-01-01 04:34

So I\'m working with a bar graph in Chart.js, and I\'m trying to get the custom tooltips working. Searching around, it seems like the thing to do in this context is to add <

相关标签:
1条回答
  • 2021-01-01 04:52

    Here is an example of custom tooltip label:

    var ctx = document.getElementById("myChart");
    
    var barChartData = {
            labels : [ "Jan/16", "Feb/16", "Mar/16", "Abr/16", "May/16", "Jun/16", "Jul/16" ],
            datasets : [ {
                type : 'bar',
                label : "Revenue (US$)",
                data : [ 4000, 4850, 5900, 6210, 2500, 4000, 6500 ],
                backgroundColor : 'rgba(0, 0, 255, 0.3)'
            } ]
        };
    
    var myChart = new Chart(ctx,
        {
            type : 'bar',
            data : barChartData,
            options : {
                responsive : true,
                tooltips : {
    
                    callbacks : { // HERE YOU CUSTOMIZE THE LABELS
                        title : function() {
                            return '***** My custom label title *****';
                        },
                        beforeLabel : function(tooltipItem, data) {
                            return 'Month ' + ': ' + tooltipItem.xLabel;
                        },
                        label : function(tooltipItem, data) {
                            return data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
                        },
                        afterLabel : function(tooltipItem, data) {
                            return '***** Test *****';
                        },
                    }
    
                },
                scales : {
                    xAxes : [ {
                        display : true,
                        labels : {
                            show : true,
                        }
                    } ],
                    yAxes : [ {
                        type : "linear",
                        display : true,
                        position : "left",
                        labels : { show : true },
                        ticks : {
                            beginAtZero : true
                        }
                    } ]
                }
            }
        });
    
    0 讨论(0)
提交回复
热议问题