score:9
Accepted answer
Finally I got it working.
Used the following code in the onComplete() function:
animation: {
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.fillStyle = "black";
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset)
{
for (var i = 0; i < dataset.data.length; i++) {
for(var key in dataset._meta)
{
var model = dataset._meta[key].data[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 5);
}
}
});
}
}
score:3
Got it to work after some researching.
You have to set it after in the onComplete
event of the animation.
The x, y values of the bars are stored in the model of the children (point, line, bar, whatever)
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
console
var model = dataset._meta[0].dataset._children[i]._model;
ctx.fillText(dataset.data[i], model.x, model.y - 5);
}
});
}
Just the structure changed a little bit.
You can see it in this working JSFiddle
Source: stackoverflow.com
Related Query
- How to show data values or index labels in ChartJs (Latest Version)
- How to show the chartjs bar chart data values labels as text?
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Show Data labels on Bar in ChartJS
- How to show data values in top of bar chart and line chart in chart.js 3
- In Chart.js >3.0, on axis of type time, how to show labels and ticks only for existing data points (make labels reflect data)?
- How can I show JSON data in Chart.js with Javascript if static values are working but dynamic from mySQL are not?
- How to change cursor on hover of data labels in chart.js version 3?
- how labels in chartjs can make data invisible
- ChartJS have xAxes labels match data source
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- How remove duplicates xAxis labels and show all values on chart
- Show Labels on Pie pieces instead of Data values Chart.js
- how to remove duplicate data set labels in chartjs
- How to show data from views on chartjs in django?
- how to show A2, B2, C2 labels using chartjs 3.2.0?
- how to use chartJS to show breakdown of selected data
- Chartjs - How to update the data from values in my database?
- How to show the data labels without hovering the mouse on the bubbles
- How do I customize the chart.js tooltip? Two labels have the same data, which I want to show you with each data
- Show and plot zero values on ChartJS line graph when no data
- How to set data values as labels in Chart.js with a Radar Chart
- How to display data values on Chart.js
- Chart.js how to show cursor pointer for labels & legends in line chart
- How get sum of total values in stackedBar ChartJs
- Chartjs hide data point labels
- Chart.js: only show labels on x-axis for data points
- ChartJS – How to show border on empty pie chart?
- chart js tooltip how to control the data that show
- how to show multiple values in point hover using chart.js
More Query from same tag
- Add mouseout event handler to legends in Chart.js
- chart.js pie chart issue with display: none
- Gantt Chart Timeline Chart js 3
- Position tooltip in center of bar
- Need Clarity on Chartjs - Asp.NetMVC or Vue-ChartJS -Asp.Net MVC
- Getting access to already created Chart.js chart
- HTML Input Form to a Javascript Variable
- Chart.js bumpy line
- what is output format of Utils? (using chartjs in vanillajs, not react/angular)
- Charts.js candlestick (Financial Charts) displays half the bar in the beginning and the end
- Multiple datasets with one data value chartjs
- Chartjs Custom Legend for Doughnut Chart Having Labelled Lines Sticking Out of Each Section
- ChartJS bubble plot categorical y-labels with numbers in string plot issue
- Chart.js horizontal bar width
- dynamic line styling in chartjs
- ChartJS doesn't draw the chart
- The data that is called in chart does not match the database
- Chart.js using json data
- Chart.js Types of property 'type' are incompatible. Type 'string' is not assignable to type '"line" | "bar" | "scatter"
- How to Remove Unnecessary Spaces around a semi-Doughnut Chart.js Chart
- Strikethough labels when data is hidden
- tc-angular-chartjs problems while assigning value to chart-data
- Change locale for Chart.js in React
- Uncaught ReferenceError : require is not defined - Chart.js
- Chart.js shows no graphs
- downhole chart - recharts or chart.js or anything else?
- Display Doughnut Pie Chart As Circle Progress Chart.js
- How to make a Chart.js Bar chart stay in its place
- How to draw baseline for bar chart in chart.js
- I'm new to node.js, and I'm working on getting a pie chart working