Canvasjs doughnut chart, remove labels

Question

I am using canvasjs to create a doughnut chart - the chart itself works great but I want the labels to be removed from the chart itself and only be shown in the tooltip.

I have tried the below based on what I read on the canvasjs site but it does not hide the label:

    <div id="chartContainer" style="width:150px; height:150px;"></div>

    var chart = new CanvasJS.Chart("chartContainer",
    {
        animationEnabled: true,
        theme: "theme2",
        creditText:"",
        axisY:{
            valueFormatString: " ",
            tickLength: 0
        },
        axisX:{
            valueFormatString: " ",
            tickLength: 0
        },            
        data: [
            {        
                type: "doughnut",
                startAngle:270 ,
                toolTipContent: "{label}: {y}",
                dataPoints: [
                    {  y: 2, label: "L1"},
                    {  y: 3, label: "L2"},
                    {  y: 8, label: "L3"}

                ]
            }
        ]
    });

    chart.render();

Is there a way to stop the label showing in the chart itself but still have a label value to use for the tooltip?

https://jsfiddle.net/befmrhz4/

bhttoan bhttoan · Accepted Answer · 2015-07-07T08:54:53

Just found a way to do it using the name attribute in dataPoints:

var chart = new CanvasJS.Chart("chartContainer",
{
    animationEnabled: true,
    theme: "theme2",
    data: [
        {        
            type: "doughnut",
            startAngle:270 ,
            toolTipContent: "{name}: {y}",
            dataPoints: [
                {  y: 2, name: "L1"},
                {  y: 3, name: "L2"},
                {  y: 8, name: "L3"}

            ]
        }
    ]
});

chart.render();

http://canvasjs.com/docs/charts/chart-options/data/datapoints/

Canvasjs doughnut chart, remove labels

1 Answers