score:5
Accepted answer
Yes, there is a possibility :-)
However, there's no built-in functionality for this in ChartJS as of now. You would rather have to create a chart plugin.
ᴘʟᴜɢɪɴ
plugins: [{
afterDatasetsDraw: function(chart) {
var ctx = chart.ctx;
chart.data.datasets.forEach(function(dataset, index) {
var datasetMeta = chart.getDatasetMeta(index);
if (datasetMeta.hidden) return;
datasetMeta.data.forEach(function(point, index) {
var value = dataset.data[index],
x = point.getCenterPoint().x,
y = point.getCenterPoint().y,
radius = point._model.radius,
fontSize = 14,
fontFamily = 'Verdana',
fontColor = 'black',
fontStyle = 'normal';
ctx.save();
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.font = fontStyle + ' ' + fontSize + 'px' + ' ' + fontFamily;
ctx.fillStyle = fontColor;
ctx.fillText(value, x, y - radius - fontSize);
ctx.restore();
});
});
}
}]
* add this followed by your chart options.
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'LINE 1',
data: [3, 1, 4, 2, 5],
backgroundColor: 'rgba(0, 119, 290, 0.5)',
borderColor: 'rgba(0, 119, 290, 0.6)',
fill: false
}, {
label: 'LINE 2',
data: [2, 4, 1, 5, 3],
backgroundColor: 'rgba(233, 30, 99, 0.5)',
borderColor: 'rgba(233, 30, 99, 0.6)',
fill: false
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
max: 7
}
}]
}
},
plugins: [{
afterDatasetsDraw: function(chart) {
var ctx = chart.ctx;
chart.data.datasets.forEach(function(dataset, index) {
var datasetMeta = chart.getDatasetMeta(index);
if (datasetMeta.hidden) return;
datasetMeta.data.forEach(function(point, index) {
var value = dataset.data[index],
x = point.getCenterPoint().x,
y = point.getCenterPoint().y,
radius = point._model.radius,
fontSize = 14,
fontFamily = 'Verdana',
fontColor = 'black',
fontStyle = 'normal';
ctx.save();
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.font = fontStyle + ' ' + fontSize + 'px' + ' ' + fontFamily;
ctx.fillStyle = fontColor;
ctx.fillText(value, x, y - radius - fontSize);
ctx.restore();
});
});
}
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
Source: stackoverflow.com
Related Query
- ChartJs line chart - display permanent icon above some data points with text on hover
- Values above points - chart.js
- Chart JS is using 1,2,3 as y values for my points for the second dataset instead of their passed in labels
- Dynamically update values of a chartjs chart
- line chart with {x, y} point data displays only 2 values
- Chart.js drag points on linear chart
- Chart.js v2.6: Add arrows to pie chart output values
- Display values outside of pie chart in chartjs
- How to display inline values in a stacked bar chart with Chart.js?
- Chart.js Timeseries chart - formatting and missing data values
- Chart JS show multiple data points for the same label
- Chart js x-axis values getting repeated twice
- Adding a label to a doughnut chart in Chart.js shows all values in each chart
- Is it possible to revert x-axe values in line chart with chart.js
- Show all values in Chart js y axis
- Chart JS: Ignoring x values and putting point data on first available labels
- Adding custom text to Bar Chart label values using Chart.js
- How to show data values in top of bar chart and line chart in chart.js 3
- Show point values in Radar Chart using chart.js
- ChartJS - handling of overlapping points in line chart
- Hovering over chart.js values in Meteor onRendered function causes chart axis shift
- How to pass values to a chart (chart.js / morris.js)
- How to commaize the data values provided to a chart in Chart.JS?
- High and low points on chart getting cut off
- Is it possible to make points in a line chart of Chart JS 3.7.0 look like a donut?
- Chart js space above bar graph
- Chart js logarithmic line chart showing NaN values instead of null
- Chartjs - Donut Chart label for small values not visible
- How can I achieve displaying data points on chart but Dotted? Chart.js V3.7.0
- add info for points in line chart (js)
More Query from same tag
- Chart.JS Get Json data for chart and return dataset where a type equals a certain type
- Is it possible to create just header tip visible bar chart with chart js just like in image
- How can I display different values on xAxes than on tooltip Chart.js V3
- Chart.JS: How to make sharp lines to smooth curved lines
- How could be the best way of implementing a 3D fft chart?
- Changing x axis labels in Chart.js line chart
- Charts.js graph not scaling to canvas size
- Adding responsive text inside chart in Charts Js
- Line graph with linear timescale in Chart.js
- Chart js pie or doughnut charts 3 inside instead of 1
- How to register plot or label click event in chart.js
- Determining which chart the user has clicked on
- chart js legend template
- Pass Ajax response array to Chart.js
- Chart.js letter spacing very awkward
- ChartJs doesn't work on a local downloaded page of Circular Gauge chart example
- How to get item what been clicked on Chart (primeNg chart + angular application)
- Put tooltip on the middle of two bars
- chart.js mix chart (bar + line): get lines to start at x = 0
- How can I add vertical line and label for each point in Chart.js?
- chart.js - Add corporate design to chart
- Charts.js - onComplete javascript function coming from JSON
- Charts with previous data appear when hovering the cursor over the chart in Chart.js
- chart.js how do we extract clicked var?
- Always Enable Tooltip : Chart JS : V3 : Bubble Chart : react-chartjs-2
- Calling a TypeScript function from a Chart.js option callback
- Chartjs v3 tooltip label not showing tooltip label color on custom calbacks
- ChartJS fails to render one of the lines in cartesian chart following update after change to max Y axis label value
- how to write labels along with data on top and bottom of each stack in bar chart
- Chartjs 2.5.0 -> Labels below the chart