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
- Chartjs to show more set of data of click of a button
- How to control the over riding of Y-axis values in Chart.js when more entries inserted using PHP?
- chart.js how to make x-axis labels position top
- Creating and Updating Graph in HTML and Javascript
- How to properly render Chartjs with big difference between bars data?
- Chart.js with Angular component - Type 'string' is not assignable to type 'ChartTitleOptions | undefined'
- chartJS doesn't show graphs on iphone/ipad
- Integrate chartjs-chart-treemap with react-chartjs-2
- How to resize Chart.JS element in React.js?
- Canvas not working in jQuery Mobile
- Add an image as background in ChartJS chart area [Not to canvas]
- How Can I Change the Y-axis labels to be shown as strings other than number in Chart.js?
- Chart JS add max value to legend
- Chart.js - Datalabels not showing using formatter
- Chart.js : how I can adjust Pie chart radius?
- Changing borderDash for specific gridLines in radar chart
- Chart.js Draw a Stacked Bar Chart with Limit Line
- Set xAxes labels to format YYYY-MM-DD HH:mm:ss in Chart.js
- Multiple Chart.js charts on a single page, from 1 function but different data
- Draw two plots using chartjs over one another with transparency
- chartjs Line chart Javascript
- Can you change legend style for bar datasets with chart.js?
- chart.js working fine on my localhost but it is not working online
- Two tone colours in chart.js pie chart
- setting chartjs global configuration using chartkick
- ChartJS using multiple Y axes
- Return 0 when some information DOESN'T EXIST (not when exists and return null)
- How to make ticks evenly spaced with Chart.js
- How to add multiple background color in line charts
- How to plot a line graph with x and y data