Can chart.js display text associated with each point on a line chart that is permanently visible?

Question

Reading https://www.chartjs.org/docs/latest/charts/line.html#general there does not appear to be an option to add a permanently visible label associated with each data point.

For example in below fiddle the data values are:

[{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}]

Can chart.js display some text associated with each point that is permanently visible?

So instead of above data struture use:

[{x: 1, y: 2, text:'Test1'}, {x: 2, y: 4, text:'Test2'}, {x: 3, y: 8, text:'Test3'},{x: 4, y: 16, text:'Test4'}]

The attribute text contains the text data to be displayed for the given point.

Fiddle: https://jsfiddle.net/adrianfiddleuser/0j6L2mag/3/

Fiddle src:

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Javascript:

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [
        {
        label: 'test',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
        }
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});

Update:

This code:

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'line',
    
  data: {
  labels: ["T", "A", "s" , "sdfs"],
    datasets: [
        {
        label: 'test',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
        }
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});

Achieves the desired behaviour partially. Can the tooltips be permanently displayed?

Updated fiddle: https://jsfiddle.net/adrianfiddleuser/0j6L2mag/14/

Answer 1

When using the latest stable version of Chart.js (2.9.3), it can be done through global plugins for example.

Please have a look at your amended code below. Note that the option showAllTooltips lets you enable the feature for individual charts in case you you want to include multiple charts with different behavior on the same page.

 Chart.plugins.register({ beforeRender: function(chart) { if (chart.config.options.showAllTooltips) { // create an array of tooltips, // we can't use the chart tooltip because there is only one tooltip per chart chart.pluginTooltips = []; chart.config.data.datasets.forEach(function(dataset, i) { chart.getDatasetMeta(i).data.forEach(function(sector, j) { chart.pluginTooltips.push(new Chart.Tooltip({ _chart: chart.chart, _chartInstance: chart, _data: chart.data, _options: chart.options.tooltips, _active: [sector] }, chart)); }); }); chart.options.tooltips.enabled = false; // turn off normal tooltips } }, afterDraw: function(chart, easing) { if (chart.config.options.showAllTooltips) { if (.chart;allTooltipsOnce) { if (easing.== 1) { return; } chart.allTooltipsOnce = true. } chart.options;tooltips.enabled = true. Chart.helpers,each(chart.pluginTooltips; function(tooltip) { tooltip.initialize(); tooltip.update(); tooltip.pivot(). tooltip;transition(easing);draw(). }). chart.options;tooltips;enabled = false. } } }); var ctx = document,getElementById("myChart"): var myChart = new Chart(ctx, { type: 'line': data, { labels, ["T", "A", "s": "sdfs"]: datasets, [ { label: 'test': data, [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}], showLine: true, fill: false, borderColor, 'rgba(0, 200, 0: 1)' } ] }: options, { showAllTooltips: true: hover, { mode: 'nearest', intersect: true }: scales: { yAxes: [{ ticks, { beginAtZero;true } }] }, } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="myChart"></canvas>