score:1
On the chart js documentation,you can run the functions when the animation completes using onAnimationComplete : function(){}
Fiddle defined
Your html file maybe like this
<canvas id="my_chart"></canvas>
Then your js file may look like this
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [60, 80, 81, 56, 55, 40]
var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx).Line(chartData, {
showTooltips: false,
onAnimationComplete: function () {
//Your other ChartJs features defined here
var ctx = this.chart.ctx;
ctx.font = //your font
ctx.fillStyle = //your text color
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.points.forEach(function (points) {
ctx.fillText(points.value, points.x, points.y - 10);//You can change the x and y position of the text as per your requirement
});
})
}
});
score:3
The following answer only works for Chart.js v2.
If you want a v1 solution, check pritishvaidya's.
You want to use the animation
property of the chart options :
options : {
animation: {
duration: 500,
onComplete: function () {
// The code here will be executed at the end of the animation
// (after 500ms here)
// You can get the canvas context using the following :
var ctx = this.chart.ctx;
// `this` being the chart instance
}
}
}
Now you want to add the value of the point above it, which can be done using the data model, which you can find in the dataset properties :
onComplete: function() {
// You get the canvas context, to help you writing what you want
var ctx = this.chart.ctx;
// Here you set the context with what you need (font, size, color ...)
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.fillStyle = 'black';
// For every dataset ...
this.data.datasets.forEach(function(dataset) {
// For every data in the dataset ...
for (var i = 0; i < dataset.data.length; i++) {
// We get its model
var model = dataset._meta[0].data[i]._model;
// And write the data above it
ctx.fillText(dataset.data[i], model.x, model.y - 2);
// You can edit the last two arguments according to what you need
}
});
}
Follows the result of the above code, which you can find on this jsFiddle :
Source: stackoverflow.com
Related Query
- Chartjs radar indexed labels
- Chartjs Radar - Change color of end point labels
- Chartjs 3.5.0 - Radar Chart - Converting the labels to images
- Chartjs - Add backgroundColor for labels radar chart
- ChartJS have xAxes labels match data source
- Make labels of ChartJS radar in a few rows
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Truncating canvas labels in ChartJS while keeping the full label value in the tooltips
- Chartjs hide data point labels
- Hide labels on x-axis ChartJS
- ChartJS hide labels on small screen sizes
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- How to remove gridlines and grid labels in Chartjs Radar?
- How to show data values or index labels in ChartJs (Latest Version)
- ChartJS Radar Chart radar lines color?
- Chartjs break line for axes tick labels text
- Change labels colors for radar chart js
- Chart.js Radar Chart How to Remove Outer Labels
- Chartjs 2.0 - Increase height of x-axis labels
- change long labels to multiline(wrap) label in ChartJs
- Chartjs : data labels getting overlapped in smaller datasets using chartjs-plugin-datalabels
- Show Data labels on Bar in ChartJS
- ChartJS 2.0 - Huddle labels on pie chart
- Remove radar chart labels in chart.js
- ChartJS V3 Radar chart Label Font Size
- How to add ChartJS code in Html2Pdf to view image
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- Change font family of labels in piechart and linechart in chartjs
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- "Inline" labels in ChartJS
More Query from same tag
- Need to put border on variablepie highchart?
- Split legend in chart js
- Modify Chart js
- Angular 5 and chart.js ts error
- Chartjs Nested Doughnut Layers With Different Thickness
- Mobile page loading in "zoomed" state
- Chart.js legend style
- Chartjs displays numbers not time
- Charts.js is automatically adding comma as thousands separator when it shouldn't
- html-pdf: How to ensure image doesn't span a page break
- Can't Draw Horizontal Line on Graph Using ChartJS Annotation Plugin and Primevue Chart
- Is it possible to have a decimal X axis for a line graph?
- Leaflet polygon display charts after click
- How do I use plugins in ng2-charts?
- Cannot find module 'chart.js'
- Create a pie chart with chartjs package in R
- Add a click event to the bar chart of chartjs
- Chart.js use font awesome in labels
- How to have ticks on x axis in 15 min increments on chartJS?
- Periodically refresh placeholder and canvas tag in Django template
- How to call a function when an element is loaded in Angular?
- Chart.js place y value position and its x-label position relative to the x-value
- How can I get chart.js to automatically add colours for dynamic labels?
- Get Chart js object from selector
- Chartjs 2.x - Dataset color changing when redrawing chart
- Detect onHover being complete on a Chart.js doughnut chart
- How to display Labels on Doughnut chart in Chart.js
- Convert a dynamic piechart from CanvasJS to Google Charts?
- ChartJS and DiscordJS implementation question
- Charts.js Formatting Y Axis with both Currency and Thousands Separator