score:10

Accepted answer

you can extend line controller drawing serie labels at the end of each line:

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
      }
    }
  }
});
#mychart {
  border: solid 1px rgba(255, 0, 0, 0.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.min.js"></script>
<canvas id="mychart" height="300" width="500"></canvas>

here is a jsfiddle: http://jsfiddle.net/beaver71/q62yv516/

score:3 

plugins = [
    {
      id: 'customplugin',
      beforedraw: chart => {
        const datasets = chart.config.data.datasets;
        if (datasets) {
          const { ctx } = chart.chart;

          ctx.save();
          ctx.fillstyle = 'black';
          ctx.font = '400 12px open sans, sans-serif';

          for (let i = 0; i < datasets.length - 1; i++) {
            const ds = datasets[i];
            const label = ds.label;
            const meta = chart.getdatasetmeta(i);
            const len = meta.data.length - 1;
            const xoffset = chart.canvas.width - 26;
            const yoffset = meta.data[len]._model.y;
            ctx.filltext(label, xoffset, yoffset);
          }
          ctx.restore();
        }
      }
    }
  ];

same as above, but as a plugin


Related Query

More Query from same tag