CODEWITHSUNDEEP
javascriptchart.js
Anna
Anna

Reputation: 409

How to add custom tooltips to only one label in Chart.js?

I have a bar chart with many datasets. I want to add a custom tooltip to just one of them, with some specific properties. In particular, this is my chart:

var grafoprocessi = new Chart(ctx2, {
// The type of chart we want to create
type: 'bar',

// The data for our dataset
data: {
    labels: ['Processi', 'Startup', 'OpenCoesione'],
    datasets: [{
        label: '2010',
        backgroundColor: 'rgb(255, 230, 230)',
        borderColor: 'rgb(255, 230, 230)',
        data: array2010
    },
    {label:'2011',
    backgroundColor: 'rgb(255, 204, 204)',
        borderColor: 'rgb(255, 204, 204)',
        data: array2011
    },
    {label:'2012',
    backgroundColor: 'rgb(255, 179, 179)',
        borderColor: 'rgb(255, 179, 179)',
        data: array2012
    },
    {label:'2013',
    backgroundColor: 'rgb(255, 102, 102)',
        borderColor: 'rgb(255, 102, 102)',
        data: array2013
    },
    {label:'2014',
    backgroundColor: 'rgb(255, 26, 26)',
        borderColor: 'rgb(255, 26, 26)',
        data: array2014
    },
    {label:'2015',
    backgroundColor: 'rgb(204, 0, 0)',
        borderColor: 'rgb(204, 0, 0)',
        data: array2015
    },
    {label:'2016',
    backgroundColor: 'rgb(153, 0, 0)',
        borderColor: 'rgb(153, 0, 0)',
        data: array2016
    },
    {label:'2017',
    backgroundColor: 'rgb(153, 0, 51)',
        borderColor: 'rgb(153, 0, 51)',
        data: array2017
    },
    {label:'2018',
    backgroundColor: 'rgb(230, 0, 76)',
        borderColor: 'rgb(230, 0, 76)',
        data: array2018
    },
    {label:'2019',
    backgroundColor: 'rgb(255, 26, 102)',
        borderColor: 'rgb(255, 26, 102)',
        data: array2019
    },
    {label:'2020',
    backgroundColor: 'rgb(255, 128, 170)',
        borderColor: 'rgb(255, 128, 170)',
        data: array2020
    }]
},

// Configuration options go here
options: {}
});

I want to add a custom tooltip to only one label, 'OpenCoesione', with data I have in an array. I don't know if there is a solution for this, as all I have already seen changes all tooltips. I want all tooltips to remain the same beside the bar of "OpenCoesione".

Upvotes: 1

Views: 975

Answers (1)

kasptom
kasptom

Reputation: 2458

A bit hacky solution but it seems to be working. StackBlitz demo.

Looking at the other answers for similar questions (e.g. How to diable a tooltip for a specific dataset) I could not find the way to disable the tooltip dynamically and use the custom tooltip instead.

The main idea is to leave the default tooltip enabled but change it to disabled in the custom tooltip function.

  options: {
    responsive: true,
    tooltips: {
      enabled: true,
      custom: function (tooltipModel) {
        if (isCustomTooltipMode(tooltipModel, 'OpenCoesione')) {
          setDefaultTooltipEnabled(this, false);
        } else {
          setDefaultTooltipEnabled(this, true);
          return;
        }

        var tooltipEl = document.getElementById('chartjs-tooltip');
        // Hide if no tooltip
        if (tooltipModel.opacity === 0 && tooltipEl) {
          tooltipEl.style.opacity = 0;
          return;
        }

        // Create element on first render
        createCustomTooltip(this, tooltipEl, tooltipModel);
      }
    }
  }

function isCustomTooltipMode(tooltipModel, labelName) {
  return tooltipModel.dataPoints == null || tooltipModel.dataPoints[0].xLabel === labelName;
}

/*
  the hacky way (could not find the better one)
*/
function setDefaultTooltipEnabled(chart, enabled) {
  chart._chart.tooltip._options.enabled = enabled;
}

In the createCustomTooltip function you can define how the tooltip for 'OpenCoesione' should look.

Chart.js docs that I've found useful: External custom tooltips, Tooltip Model, Tooltip Item

Upvotes: 1

Related Questions