Chart JS tooltips diffrent colors for label

Question

Have a problem with Chart JS tooltips. Want to create custom label with two different colors.

tooltips: {
  titleFontColor: '#434343',
  bodyFontColor: '#434343',
  footerFontColor: '#02cbff',
  backgroundColor: 'rgba(255,255,255,1)',
  caretPadding: 5,
  displayColors: false,
  intersect: true,
  callbacks: {
    title: function() {},
    label: function(tooltipItem, data) {
      var label = data.labels[tooltipItem.index];
      var datasetLabel = '$' + tooltipItem.yLabel;
      return label + ' ' + datasetLabel;
    }
  }
}

"label" must have red color
"datasetLabelmust have green color

Need such result for tooltip

You want 3 May in red and $29 in green ?? – tech_geek Jul 20 '17 at 05:41 — tech_geek, Jul 20 '17 at 05:41

score 1 · Answer 1 · answered Jul 20 '17 at 05:57

So you want tooltip to be custom. Actually chartjs documentation itself is very good on designing you own custom tooltip. Which you can see here and here. Moreover you can also set the chartjs tooltip options globally with this.

Chart.defaults.global = {

// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,

// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],

// String - Tooltip background colour
tooltipFillColor: "rgba(0,0,0,0.8)",

// String - Tooltip label font declaration for the scale label
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tooltip label font size in pixels
tooltipFontSize: 14,

// String - Tooltip font weight style
tooltipFontStyle: "normal",

// String - Tooltip label font colour
tooltipFontColor: "#fff",

// String - Tooltip title font declaration for the scale label
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tooltip title font size in pixels
tooltipTitleFontSize: 14,

// String - Tooltip title font weight style
tooltipTitleFontStyle: "bold",

// String - Tooltip title font colour
tooltipTitleFontColor: "#fff",

// Number - pixel width of padding around tooltip text
tooltipYPadding: 6,

// Number - pixel width of padding around tooltip text
tooltipXPadding: 6,

// Number - Size of the caret on the tooltip
tooltipCaretSize: 8,

// Number - Pixel radius of the tooltip border
tooltipCornerRadius: 6,

// Number - Pixel offset from point x to tooltip edge
tooltipXOffset: 10,

// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

// String - Template string for single tooltips
multiTooltipTemplate: "<%= value %>",

// Function - Will fire on animation progression.
onAnimationProgress: function(){},

// Function - Will fire on animation completion.
onAnimationComplete: function(){}
}

This post describes best your needs. Thanks to the Suganth's answer.

I've tried custom tooltip too. But it's not solved my problem.Custom tooltip gives opporunity insert own innerHtml. But i've tried insert inline styles, nothing happen. — nosensus, Jul 20 '17 at 07:57
but whats the matter if you set all by the global defaults? i mean if inline not working then there are other option like padding and other stuff. — tech_geek, Jul 20 '17 at 08:02

score 0 · Answer 2 · answered Jul 20 '17 at 10:50

Find a way how to this. I have created separate styles.Now it looks good this is what i need.

tooltips: {
    enabled: false,
    intersect: true,
    custom: function(tooltipModel) {
      // Tooltip Element
      var tooltipEl = document.getElementById('chartjs-tooltip');

      // Create element on first render
      if (!tooltipEl) {
        tooltipEl = document.createElement('div');
        tooltipEl.id = 'chartjs-tooltip';
        tooltipEl.innerHTML = "<div></div>";
        document.body.appendChild(tooltipEl);
      }

      // Hide if no tooltip
      if (tooltipModel.opacity === 0) {
        tooltipEl.style.opacity = 0;
        return;
      }

      // Set caret Position
      tooltipEl.classList.remove('above', 'below', 'no-transform');
      if (tooltipModel.yAlign) {
        tooltipEl.classList.add(tooltipModel.yAlign);
      } else {
        tooltipEl.classList.add('no-transform');
      }

      function getBody(bodyItem) {
        return bodyItem.lines;
      }

      // Set Text
      if (tooltipModel.body) {
        var titleLines = tooltipModel.title || [];
        var bodyLines = tooltipModel.body.map(getBody);
        var innerHtml = '<p class="custom-tooltip">';

        titleLines.forEach(function(title) {
          innerHtml += '<span class="custom-tooltip_xAxis">' + title + ":" + '</span>';
        });

        bodyLines.forEach(function(body, i) {
          innerHtml += '<span class="custom-tooltip_yAxis">' + '$' + body + '</span>';
        });
        innerHtml += '</p>';
        tooltipEl.innerHTML = innerHtml;
      }

      // `this` will be the overall tooltip
      var position = this._chart.canvas.getBoundingClientRect();

      // Display, position, and set styles for font
      tooltipEl.style.opacity = 1;
      tooltipEl.style.top = position.top + tooltipModel.caretY + 20 + 'px';
      tooltipEl.style.left = position.left + tooltipModel.caretX + 'px';
    }

Chart JS tooltips diffrent colors for label

2 Answers2