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
Source: stackoverflow.com
Related Query
- How to add text at end of each line in charts.js
- Add a text as tooltip for each point on a line chart
- How to add multiple background color in line charts
- How to add an end line to my graph using Chart.js?
- How to add a vertical line on the end of the chart.js scatter graph
- How can I add vertical line and label for each point in Chart.js?
- How to add text inside the doughnut chart using Chart.js?
- How to add an on click event to my Line chart using Chart.js
- How to add images as labels to Canvas Charts using chart.js
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to add text in centre of the doughnut chart using Chart.js?
- Chart.js - Line charts with different colors for each border lines
- Chart.js - How to Add Text in the Middle of the Chart?
- How to add a point to chart.js line chart?
- How do you add custom text to tooltips in charts.js
- How do I make line charts overlay over bar charts in chartjs
- How to add a vertical line on Chart.js when hover a point?
- How to add gradient background to Line Chart [vue-chart.js]
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- How to add ChartJS code in Html2Pdf to view image
- How to add a horizontal line at a specific point in chart.js when hovering?
- How to add area with break on line chart with fill color
- chart.js add second line in a Line chart that starts from end of first line
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chart.js - how to add a second data line to the line graph
- How to sort XY line chart tooltip items based on value and add thousands separators?
- How can I add a unit to the end of my Y Axis values in ChartJS?
- How to make lines in line charts from ng2-charts straight lines?
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- How to add text inside the doughnut chart using Chart.js version 3.2.1
More Query from same tag
- How can I draw dotted line using chartjs?
- Chart.JS: How to make sharp lines to smooth curved lines
- chart js showing different width of bar
- Bar Chart not displaying when using chart.js
- How can I set the scale with alphabet on chartjs?
- ng-repeat in ChartJS AngularJS
- Vuejs, how to build an object?
- How to create multiple x-axis datasets labels by using chart.js
- is there a way to do automatic scrolling?
- Chart.js Console JS Error while destroy the Chart on click event
- ChartJS Recreate Chart
- ChartJS getting an unwanted line between first data point and last data point
- ChartJS Tooltips with time axis and multiple datasets
- Chart.js set active segment on initialize
- How to show bar chart labels clearly using ChartJS?
- Chart.js line chart not showing in Google Chrome canvas(only in Microsoft Edge)
- angular-charts.js doesnt work with ionic
- destroy method implementation in pie chart chartjs
- Add information on y Chart Js
- Set minimum step size in chart js
- ChartJs - Round borders on a doughnut chart with multiple datasets
- How do you hide the title of a chart tooltip?
- react-chart-js-2 in combination with TypeScript for LineCharts: Uncaught Error: "point" is not a registered element
- Create PDF with mpdf and chart.js
- Problem creating scatter graph using chart.js
- Chart.js - Line charts with different colors for each border lines
- Angular 2 & ng2-charts: (SystemJS) Unexpected directive 'BaseChartComponent' imported
- Charts.js tooltip overlapping text on chart
- How do you remove the data value from the mouse-over result in radar chart?
- I need a PHP query to grab data from the database and use in my bar charts for results