Add some Text Inside of the Tooltip

by

👍:0

I’m not sure I understand your question correctly but the labels are defined in the array

labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

that you can change to

labels: ['Label 1','Label 2','Label 3','Label 4','Label 5','Label 6', 'Label 7', 8, 9, 10]

You can also define an array of labels to use in the displayLineChart.

var myLabels = ['Label 1','Label 2','Label 3','Label 4','Label 5','Label 6', 'Label 7', 8, 9, 10];

  function displayLineChart() {
    var data = {
      labels: myLabels,
      datasets: [{
        label: "First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
      }, {
        label: "Second dataset",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
      }]
    };
    var ctx = document.getElementById("lineChart").getContext("2d");
    var options = {};
    var lineChart = new Chart(ctx).Line(data, options);
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>


<body onload="displayLineChart();">
  <div class="box">
    <canvas id="lineChart" height="450" width="800"></canvas>
  </div>
</body>

EDIT: to manipulate the text in the tooltip you can define a template in the options for the chart. You have possibilities:

  1. multiTooltipTemplate for multiple datasets

  2. tooltipTemplate for single datasets

For multiTooltipTemplate it’s not possible to change the title of the tooltip,if you want to do so you need to define your own custom tooltip.
This is because multiTooltipTemplate by default takes as a tooltip title the label of the x-axis.

(sources: https://stackoverflow.com/a/28579665/2314737 and https://github.com/nnnick/Chart.js/issues/499)

Below is an example for a single dataset:

var myLabels = [1,2,3,4,5,6,7,8,9,10];

  function displayLineChart() {
    var data = {
      labels: myLabels,
      datasets: [{
        label: "First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
      },]
    };
    var ctx = document.getElementById("lineChart").getContext("2d");
    // define multiTooltip template
    var options = {
    multiTooltipTemplate: "My Text <%= datasetLabel %> - <%= value %>",   
    // tooltipTemplate is activated only when there's just one dataset
    tooltipTemplate: "Label <%= label %>",
    };
    
    var lineChart = new Chart(ctx).Line(data, options);
    
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>

<body onload="displayLineChart();">
  <div class="box">
    <canvas id="lineChart" height="450" width="800"></canvas>
  </div>
</body>

Leave a comment