Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset

Question

I am trying to take a chartJS doughnut chart and instead of it displaying each piece of data on a single dataset I want each unique piece of data (with its own unique label) to display on its own dataset. This means to represent that data on each dataset it still needs two pieces of data: - the desired value (ie. 80%) - the difference value (ie. 20%)

After some research I figured out how to use callback function to display the dataset label to each of its data values and add a percentage character after its number value. Now I am trying to hide the tooltip for the second data value within each dataset. I am new to javascript so a little help would be appreciated! Cheers.

Chart.defaults.global.defaultFontSize = 16;
Chart.defaults.global.defaultFontColor = '#000';

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
    datasets: [
    /* Outer doughnut data starts*/
    {
        data: [90, 10],
        backgroundColor: [
            'rgba(210, 35, 42, 1)',
            'rgba(0, 0, 0, 0.05)'
        ],
        label: 'Skill #1'
    },
    /* Outer doughnut data ends*/
    /* Inner doughnut data starts*/
    {
        data: [50, 50],
        backgroundColor: [
            'rgba(210, 35, 42, 0.75)',
            'rgba(0, 0, 0, 0.05)'
        ],
        label: 'Skill #2'
    },
    /* Inner doughnut data ends*/
    {
        data: [15, 85],
        backgroundColor: [
            'rgba(210, 35, 42, 0.5)',
            'rgba(0, 0, 0, 0.05)'
        ],
        label: 'Skill #3'
    },
    {
        data: [5, 95],
        backgroundColor: [
            'rgba(210, 35, 42, 0.25)',
            'rgba(0, 0, 0, 0.05)'
        ],
        label: 'Skill #4'
    }
    ],
},
options: {
    title: {
        display: true,
        text: 'My Skills',
        fontSize: 24,
    },
    scales: {
        xAxes: [{
            gridLines: {
                display: false,
                drawBorder: false,
            },
            ticks: {
                display: false,
            }
        }],
        yAxes: [{
            gridLines: {
                display: false,
                drawBorder: false,
            },
            ticks: {
                display: false,
            }
        }]
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                var dataset = data.datasets[tooltipItem.datasetIndex];
                var dslabelamt = dataset.data[tooltipItem.index];
                return data.datasets[tooltipItem.datasetIndex].label + ': ' + dslabelamt + '%';
            }
        }
    }   
}
});

https://codepen.io/manudan711/pen/aadYRj

Martin Zeitler Martin Zeitler · Accepted Answer · 2018-08-25T19:41:04

those data-sets in chart.js don't work alike series in other charts do, but are index-based. therefore you'd require only two datasets and then you'd have to map those values accordingly; so that index position 0, 1, 2, 3, ... on both of the data arrays, would sum up to 100.

Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset

1 Answers