[Chartjs]-Chart JS tooltips diffrent colors for label

by

1👍

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.

0👍

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';
    }

Leave a comment