1

Is there a way so that one can disable the tool tips on one dataset on a Chart JS Chart and leave the tool tips present on the other dataset. Here is my current code:

var data = {
                    labels: [' . $labels . '],
                    datasets: [
                        {
                            label: "Portfolio Performance",
                            fillColor: "rgba(0,0,220,0.2)",
                            strokeColor: "rgba(0,220,220,1)",
                            pointColor: "rgba(0,0,0,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: [' . $values . ']
                        },
                        {
                            label: "Portfolio Expendature",
                            fillColor: "rgba(0,0,220,0)",
                            strokeColor: "rgba(0,0,0,1)",
                            pointColor: "rgba(0,0,0,0)",
                            pointStrokeColor: "rgba(0,0,220,0)",
                            pointHighlightFill: "rgba(0,0,220,0)",
                            pointHighlightStroke: "rgba(220,220,220,0)",
                           data: [4450000,4450000,4450000,4450000,4450000]
                        }
                    ]
                };
                var option = {
                    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%=  \'£\' + FormatNumberBy3(Number(value).toFixed(2), \'.\' , \',\')  %>",

                    maintainAspectRatio: false, 
                    bezierCurve: false,
                    responsive: true,
                    scaleLabel: "<%= \'£\' + FormatNumberBy3(Number(value), \'.\' , \',\') %>"
                };

                var ctx = document.getElementById("graph").getContext("2d");
                var myLineChart = new Chart(ctx).Line(data, option);
WhittyProgramming
  • 19
  • 3

2 Answers2

1

You can use custom tooltips to do this (basically you use an HTML element instead of using the canvas to render the tooltip alone). See https://github.com/nnnick/Chart.js/blob/v1.0.2/samples/line-customTooltips.html for an example for line charts.

In your case, you can adjust the loop at https://github.com/nnnick/Chart.js/blob/v1.0.2/samples/line-customTooltips.html#L68 to exclude / include the datasets as you see fit.

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
1

I make use of the custom tooltip configuration to achieve this(here it hides datasets that doesn't have "Income" label):

this.myChart = new Chart(this.ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                    label: "Income",
                    data: data3
                },
                {
                    label: "Tax",
                    data: data1,
                    backgroundColor: "#3EAFD5"
                },
                {
                    label: "Expenses",
                    data: data2,
                    backgroundColor: "#D24B47"
                }
            ]
        },
        options: {
            responsive: true,
            tooltips: {
                custom: function(tooltipModel) {
                    if (tooltipModel.body && tooltipModel.body[0].lines && tooltipModel.body[0].lines[0].indexOf("Income") == -1) {
                        tooltipModel.opacity = 0;
                    }
                }
            }
        }
    }