title: How to display different tooltip based on data values in ChartJS v2?
body: <p>I’m using ChartJs, to display a Line chart and I’m trying to do 2 things :</p>
  
  <p>The first one is to display different colors based on the tooltip’s value. <a href="https://i.stack.imgur.com/41xu3.png" rel="nofollow noreferrer">Highest value</a> vs <a href="https://i.stack.imgur.com/csjcP.png" rel="nofollow noreferrer">Medium value</a></p>
  
  <p>The second one is to display a different tooltip if the tooltips value is the lowest. <a href="https://i.stack.imgur.com/IXjM9.png" rel="nofollow noreferrer">Minimun value</a></p>
  
  <p>I’ve tried to use a custom plugins to do this, but It didn’t work</p>
  
  <p>This is the code I've managed to do so far :</p>
  
  <pre><code>Chart.plugins.register({
      beforeRender: function(chart) {
        if (chart.config.options.showAllTooltips) {
          chart.pluginTooltips = [];
          chart.config.data.datasets.forEach(function(dataset, i) {
            chart.getDatasetMeta(i).data.forEach(function(sector, j) {
              console.log(j, sector);
              chart.pluginTooltips.push(
                new Chart.Tooltip(
                  {
                    _chart: chart.chart,
                    _chartInstance: chart,
                    _data: chart.data,
                    _options: chart.options.tooltips,
                    _active: [sector],
                  },
                  chart
                )
              );
            });
          });
  
          // turn off normal tooltips
          chart.options.tooltips.enabled = false;
        }
      },
      afterDraw: function(chart, easing) {
        if (chart.config.options.showAllTooltips) {
          if (!chart.allTooltipsOnce) {
            if (easing !== 1) return;
            chart.allTooltipsOnce = true;
          }
  
          // turn on tooltips
          chart.options.tooltips.enabled = true;
          Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
            tooltip.initialize();
            tooltip._options.bodyFontFamily = "Visby";
  
            // Change color based on value
            tooltip._options.bodyFontColor = '#FEB122';
  
            // Change tooltip's html if minimun value of dataset
  
            // Values .datapoints[0].value
            // console.log(tooltip._model);
            tooltip._options.displayColors = false;
            tooltip._options.bodyFontSize = tooltip._chart.height * 0.05;
            tooltip._options.yPadding = 0;
            tooltip._options.xPadding = 0;
            tooltip.update();
            tooltip.pivot();
            tooltip.transition(easing).draw();
          });
          chart.options.tooltips.enabled = false;
        }
  
      }
    });
  
  
    let canvas = document.getElementById("myLineChart");
  
    Chart.defaults.global.defaultFontFamily = "Visby";
  
    const ctx = canvas.getContext('2d');
    const labels = JSON.parse(ctx.canvas.dataset.dates);
    const prices = JSON.parse(ctx.canvas.dataset.prices);
    const myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: labels,
          datasets: [{
              label: "Prix du billet",
              data: prices,
              backgroundColor: [
                'rgba(0, 0, 0, 0)',
              ],
              borderColor: [
                '#F2F2F2',
              ],
              pointBackgroundColor:
                '#FEB122',
              pointBorderColor:
                '#FEB122',
              borderWidth: 3,
          }]
        },
        options: {
          showAllTooltips: true, // call plugin we created
          responsive: true,
          cutoutPercentage: 60,
          legend: {
            position: "bottom"
          },
          animation: {
            animateScale: true,
            animateRotate: true
          },
          tooltips: {
            enabled: false,
            backgroundColor:"rgba(0,0,0,0)",
            callbacks: {
              title: function(tooltipItems, data) {
                return "";
              },
              label: function(tooltipItem, data) {
                var datasetLabel = "";
                var label = data.labels[tooltipItem.index];
                return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + '€';
              },
              labelColor: function(tooltipItem, data) {
                // console.log(data);
              }
            }
          },
          legend: {
            display: false
          },
          layout: {
           padding: {
              left: 32,
              right: 32,
              top: 32,
              bottom: 32
            }
           },
          scales: {
            xAxes: [{
              gridLines: {
                display: false,
                drawBorder: false,
              },
            }],
            yAxes: [{
              display: false
            }]
          }
        }
    });
  </code></pre>
  
  <p>How could I make this work ?</p>