CODEWITHSUNDEEP
javascriptjquerycanvaschartscanvasjs
Masum billah
Masum billah

Reputation: 982

how to remove tooltip and dataset in CanvasJS?

I use CanvasJS. Whenever the chart contains multiple dataSeries, it is recommended to represent each dataSeries in a legend(in jsfiddel ANS1,ANS2 is legend name) and hovers on a dataPoint or dataSeries, a toolTip appears with information about the dataPoint and dataSeries. when i click legend each then hide the data set and remove graph bar but not on hover tooltip.

1. 1st Image is correct because 2 tooltip and 2 dataset

when i click ANC1 it hide but tooltip still show.

2. 2nd Image is incorrect because still 2 tooltip and 1 dataset

enter image description here enter image description here

My Code in jsfiddle

var chart = new CanvasJS.Chart("chartContainer",
    {
        title:{
            text: "title"
        },
        axisX:{
            title: "xxxxxxxxxx",
            labelAngle: 135,
            labelFontSize: 23
        },
        axisY:{
            title:"Number of Services"
        },
        axisY2: {
            title: "Number of Eligible Couple",
            titleFontSize: 25,
        },
        toolTip: {
            enabled: true,
            shared: true    },
        animationEnabled: true,
        legend:{
            horizontalAlign: "center", // left, center ,right 
            verticalAlign: "top",  // top, center, bottom  
            cursor:"pointer",
            itemclick: function(e) {
                if (typeof (e.dataSeries.visible) ===  "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                }
                else
                {
                    e.dataSeries.visible = true;
                }
                chart.render();
            }
        },
        data: [
            {
                type: "column",
                name: "ANC1",
                showInLegend: "true",
                visible: true,
                dataPoints: [{label:"ROY2",x:0,y:36},{label:"ROY3",x:1,y:36}]
            },
            {
                type: "column",
                name: "ANC2",
                showInLegend: "true",
                visible: true,
                dataPoints: [{label:"ROY2",x:0,y:56},{label:"ROY3",x:1,y:36}]
            }
        ]
    });
chart.render();

Upvotes: 0

Views: 1023

Answers (1)

Valera
Valera

Reputation: 2923

You can set up a custom tooltip https://canvasjs.com/docs/charts/chart-options/tooltip/content-formatter/

Code for your case: 

var chart = new CanvasJS.Chart("chartContainer",
{
    toolTip: {
        enabled: true,
        shared: true,
        contentFormatter: function(e){
            var str = "";
            for (var i = 0; i < e.entries.length; i++){
                if(e.entries[i].dataSeries.visible){
                    var temp = (e.entries[i].dataSeries.name + ': '+ e.entries[i].dataPoint.y);
                    str = str.concat(temp, '<br>');
                }
            };
            return (str);
          }
        },
    ...

Upvotes: 1

Related Questions