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
- Updating data in chart.js
- how to add percentage value to legend field in pie chart using chart.js
- Yii2 Chart is not defined
- Object is possibly 'null' react typescript
- Possible to merge 2 bars in bar chart (chart.js)
- How to show multiple datasets in line chart js
- ChartJs is not working in angular 4 with no errors
- Google charts: Error: Row 0 has 1 columns, but must have 2
- chart.js mixed chart types
- How make border radius for chart area chart.js?
- Django Chart.js
- daily activity chart using PHP MySQL
- chartjs - bar graphs size not increasing
- Chart.js - Increase space between y Axes and the first column bar
- Chart.JS Underfined with JSON
- Chart.js rotating x-axis text labels
- Responsive canvas extends beyond div
- NuxtJS ChartJS Gradient Color doesnt apply
- Why i lost my chart.js when i do a new render
- ChartJS tooltip scrollbar to prevent data overflow?
- Position tooltip based on mouse position
- ChartJS: Translate x axis month to other languages
- Charts.js how to have 2 different size y-axis
- ChartJS display legend
- TypeError: Cannot read property 'length' of null in react component
- Align a data label below a point on a bubble graph (Chart.JS)
- chart.js with null data point in dataset
- Embed unique identifier in Chart.js segments?
- How can I add a label above just the last bar in a Chart.JS bar chart?
- I want to put bar of different color by the values in chart.js