How to add text at end of each line in line chart - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

How to add text at end of each line in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js end line labels</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
      <style id="compiled-css" type="text/css">

#myChart {//from   ww w .j  a v  a  2  s  .c o m
   border: solid 1px rgba(255, 0, 0, 0.5);
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var chartData = {
  datasets: [{
    label: 'serie1',
    backgroundColor: 'rgba(255, 255, 255, 0.0)',
    borderColor: 'rgba(0, 119, 290, 0.6)',
    data: [{x: 1, y: 10}, {x: 2, y: 12}, {x: 3, y: 18}, {x: 4, y: 5}, {x: 5, y: 25}, {x: 6, y: 30}]
  },
  {
    label: 'serie2',
    backgroundColor: 'rgba(255, 255, 255, 0.0)',
    borderColor: 'rgba(120, 0, 190, 0.6)',
    data: [{x: 1, y: 8}, {x: 2, y: 9}, {x: 3, y: 16}, {x: 4, y: 8}, {x: 5, y: 12}, {x: 6, y: 20}]
  },
  {
    label: 'serie3',
    backgroundColor: 'rgba(255, 255, 255, 0.0)',
    borderColor: 'rgba(0, 200, 10, 0.6)',
    data: [{x: 1, y: 10}, {x: 2, y: 5}, {x: 3, y: 26}, {x: 4, y: 18}, {x: 5, y: 19}, {x: 6, y: 10}]
  }]
};
var originalController = Chart.controllers.line;
Chart.controllers.line = Chart.controllers.line.extend({
  draw: function() {
    originalController.prototype.draw.call(this, arguments);
    drawLabels(this);
  }
});
function drawLabels(t) {
   ctx.save();
  ctx.font = Chart.helpers.fontString(12, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
  ctx.fillStyle = 'red';
  ctx.textBaseline = 'bottom';
  var chartInstance = t.chart;
  var datasets = chartInstance.config.data.datasets;
  datasets.forEach(function(ds, index) {
    var label = ds.label;
    var meta = chartInstance.controller.getDatasetMeta(index);
    var len = meta.data.length-1;
    //console.log(ds, meta.data[len]._model);
    var xOffset = meta.data[len]._model.x+10;
    var yOffset = meta.data[len]._model.y;
    ctx.fillText(label, xOffset, yOffset);
  });
  ctx.restore();
}
var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
     legend: { display: false },
    scales: {
      xAxes: [{
         type: 'linear',
        scaleLabel: { display: true, labelString: 'x' }
      }],
      yAxes: [{
        ticks: { min: 0 },
        scaleLabel: { display: true, labelString: 'y' }
      }]
    },
    layout: {
      padding: {
        left: 0,
        right: 60,
        top: 20,
        bottom: 0
      }
    }
  }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" height="300" width="500"></canvas>  
   </body>
</html>

Related Tutorials