score:6
with the below updated oncomplete
, your code should work with chart.js v2.1
...
var options = {
animation: {
oncomplete: function() {
var ctx = this.chart.ctx;
ctx.textalign = "center";
ctx.textbaseline = "middle";
var chart = this;
var datasets = this.config.data.datasets;
datasets.foreach(function (dataset, i) {
ctx.font = "20px arial";
switch (dataset.type) {
case "line":
ctx.fillstyle = "black";
chart.getdatasetmeta(i).data.foreach(function (p, j) {
ctx.filltext(datasets[i].data[j], p._model.x, p._model.y - 20);
});
break;
case "bar":
ctx.fillstyle = "white";
chart.getdatasetmeta(i).data.foreach(function (p, j) {
ctx.filltext(datasets[i].data[j], p._model.x, p._model.y + 20);
});
break;
}
});
}
},
...
fiddle - http://jsfiddle.net/0j4g7kxy/
i've assumed you needed only the bar, but i have retained the code for line in the oncomplete
, so it should work for lines too. if you don't need either, just remove the related case
from the oncomplete
code
score:0
i have adapted it a little bit for horizontal bars to show the sum of values instead of the stacked values. maybe someone can beautify the code a little bit but it works this way:
oncomplete: function() {
var ctx = this.chart.ctx;
ctx.textalign = "center";
ctx.textbaseline = "middle";
var chart = this;
var datasets = this.config.data.datasets;
var sum=new array();
datasets.foreach(function (dataset, i) {
ctx.font = "10px arial";
switch ( chart.getdatasetmeta(i).type ) {
case "line":
ctx.fillstyle = "black";
chart.getdatasetmeta(i).data.foreach(function (p, j) {
ctx.filltext(datasets[i].data[j], p._model.x, p._model.y - 20);
});
break;
case "bar":
ctx.fillstyle = "white";
chart.getdatasetmeta(i).data.foreach(function (p, j) {
ctx.filltext(datasets[i].data[j], p._model.x, p._model.y + 20);
});
break;
case "horizontalbar":
ctx.fillstyle = "black";
chart.getdatasetmeta(i).data.foreach(function (p, j) {
if (sum[j]== null) { sum[j] = 0; }
sum[j]=sum[j]+parsefloat(datasets[i].data[j]);
if (i==datasets.length-1) {ctx.filltext(sum[j], p._model.x+10, p._model.y);}
});
break;
}
});
}
score:1
in addition to potatopeelings's answer, using chart.js v2.5, i had to adjust the following:
switch (dataset.type)
to switch ( chart.getdatasetmeta(i).type )
score:1
works for me! chart.js 2.5.0
in addition to potatopeelings's and slashpm answers.
to handle horizontalbar you can add this case (change the padding "offsety" to "offsetx")
case "horizontalbar":
ctx.fillstyle = "black";
chart.getdatasetmeta(i).data.foreach(function (p, j) {
ctx.filltext(datasets[i].data[j], p._model.x + 20, p._model.y);
});
break;
here is the full function
function chartvaluesshow() { // show max values of the chart
var ctx = this.chart.ctx;
ctx.textalign = "center";
ctx.textbaseline = "middle";
var chart = this;
var datasets = this.config.data.datasets;
datasets.foreach(function (dataset, i) {
ctx.fontsize = "10px";
switch (chart.getdatasetmeta(i).type) {
case "line":
ctx.fillstyle = "black";
chart.getdatasetmeta(i).data.foreach(function (p, j) {
ctx.filltext(datasets[i].data[j], p._model.x, p._model.y - 20);
});
break;
case "bar":
ctx.fillstyle = "black";
chart.getdatasetmeta(i).data.foreach(function (p, j) {
ctx.filltext(datasets[i].data[j], p._model.x, p._model.y + 20);
});
break;
case "horizontalbar":
ctx.fillstyle = "black";
chart.getdatasetmeta(i).data.foreach(function (p, j) {
ctx.filltext(datasets[i].data[j], p._model.x + 20, p._model.y);
});
break;
}
});
}
Source: stackoverflow.com
Related Query
- Chartjs Bar chart shows undefined values
- How to assign values to different lables(legends) of my dataset of stacked bar chart
- Add DataSet Bar Chart - Chart.JS
- How to display inline values in a stacked bar chart with Chart.js?
- 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
- Bar values in Chart.js 2.X - dataset.metadata undefined
- Chart.js stacked bar chart - sorting values in bar by value
- Chart.js v3: Tooltip callback doesn't identify clicked dataset of stacked bar chart
- Display Bar chart values in the graph - ChartJS
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- Create stacked bar chart with a single dataset per stack
- Bar chart with min height and zero values - ChartJs
- Get Dataset Values from Chart JS onHover in Version 3
- Stacked bar chart with chartjs with included values
- How to show the chartjs bar chart data values labels as text?
- ChartJS: Highlight dataset in a stacked bar chart when hovering over the legend?
- Chartjs - Stacked bar chart data order causes invisible other values
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- Chartjs - Stacked bar chart blocking other values
- Hiding spaces with zero values in bar chart with chart.js
- Bar chart from Chart.js not showing the second dataset
- chart.js 3 stacked bar chart - tooltip showing for zero values
- Chart.js Change color of the values *inside* the bars of a Bar chart
- How to fix a stacked logarithmic bar chart values to fit the grid
- Not able to see values on bar chart
- Chart JS attempt to stacked bar chart tooltip for only one dataset
- Can not update bar chart values in Chart.js 2.0.0 alpha3
- Why do Bar Pie Chart values not line up?
- Display ellipsis for null or empty values in the bar chart using Chart.js
More Query from same tag
- ChartJS change monthly labels as time/date
- react-chartjs-2 fill property not working?
- Resize bars' chart in ReactChartJS
- Google Charts, HighCharts or ChartJS Dual Axis Gantt Chart and Line Chart Visualization
- Avoid data resetting when toggling series
- Hide x-Axis from angularjs-chartjs
- How to add an image to a slice of a donut chart in chart.js?
- Chart.js angular8 Y axis ticks
- How to pass model object to javascript function in asp.net Core
- How to get rid of the white square outline or border in the tooltip for chartjs?
- Create a ChartJS with 2 database tables
- Chart.register is not a function
- How to set minimum value to Radar Chart in chart js
- Why are some react-chartjs-2 options being ignored?
- How to manipulate data in react-chartjs-2
- how to create a bar chart with php data variables
- Chat.js, Codeigniter and MySQL. Something wrong on recover data
- Charts not being displayed in django app when using Chart.js 3.6 version
- Adding text inside 2 different Doughuts chartjs
- Chart.js updating data
- How to group and count missing values using linq
- chart js graph legend colors
- Chart.js only appears randomly, and disappears on page refresh
- How can I implement Polar area charts with Chart.js and Canvas
- Django Serializers - Return the sum of values by filter
- Filtering labels to show user from Chart.js
- Adding caret/arrow to a Chart.js custom html tooltip
- Is it Possible to get the base 64 of graph without showing it on page / canvas (Graph.Js)
- Chart.js - Font only renders after you reload the canvas
- How to reduce spaces between grids for graph in chart.js