score:1
Accepted answer
at the begin of the animation.oncomplete
callback function, you should add the following lines:
ctx.save();
ctx.globalcompositeoperation='destination-over';
and at the end of animation.oncomplete
, you need to invoke ctx.restore()
.
for further details about
ctx.globalcompositeoperation='destination-over'
, have a look at this answer.
please take a look at your amended code and see how it works.
var barchartdata = {
labels: ["jul 19", "aug 19", "sep 19", "oct 19", "nov 19", "dec 19", "jan 20", "feb 20", "mar 20", "apr 20", "may 20", "jun 20"],
datasets: [{
//label: 'jan 20',
backgroundcolor: '#367ee9',
bordercolor: '#367ee9',
borderwidth: 1,
data: [33111, 27510, 27377, 14947, 4312, 7279, 70988, 2903, 29575, 65, 9861, 3416],
data_action: ["bar1_action", "bar2_action", "bar3_action", "bar4_action", "bar5_action", "bar6_action", "bar7_action", "bar8_action", "bar9_action", "bar10_action", "bar11_action", "bar12_action"],
data_alt: ["click here to see results of bar1_alt", "bar2_alt", "bar3_alt", "bar4_alt", "bar5_alt", "bar6_alt", "bar7_alt", "bar8_alt", "bar9_alt", "bar10_alt", "bar11_alt", "bar12_alt"],
}]
};
var ctx = document.getelementbyid('canvas').getcontext('2d');
window.mybar = new chart(ctx, {
type: 'bar',
data: barchartdata,
options: {
responsive: true,
onhover: (event, chartelement) => {
event.target.style.cursor = chartelement[0] ? 'pointer' : 'default';
},
hover: {
animationduration: 0,
},
animation: {
duration: 1000,
oncomplete: function() {
var chartinstance = this.chart,
ctx = chartinstance.ctx;
ctx.save();
ctx.globalcompositeoperation='destination-over';
ctx.font = chart.helpers.fontstring(chart.defaults.global.defaultfontsize, chart.defaults.global.defaultfontstyle, chart.defaults.global.defaultfontfamily);
ctx.textalign = 'center';
ctx.textbaseline = 'bottom';
//ctx.canvas.style.zindex = 5;
this.data.datasets.foreach(function(dataset, i) {
var meta = chartinstance.controller.getdatasetmeta(i);
meta.data.foreach(function(bar, index) {
var val = dataset.data[index];
var data = "$" + val.tolocalestring();
if (val > -1) {
ctx.filltext(data, bar._model.x, bar._model.y - 5);
} else {
ctx.filltext(data, bar._model.x, bar._model.y + 14);
}
});
});
ctx.restore();
}
},
onclick: function(evt) {
var firstpoint = this.getelementatevent(evt)[0];
if (firstpoint) {
var value = this.data.datasets[firstpoint._datasetindex].data_action[firstpoint._index];
alert(value);
}
},
legend: {
display: false,
position: 'top',
onhover: function() {
event.target.style.cursor = 'pointer';
},
},
title: {
display: true,
text: 'total benefits exceeded ($231,345) (claim date)',
fontcolor: '#000',
fontsize: '15',
},
tooltips: {
yalign: 'top',
displaycolors: false, // hide color box
ypadding: 10,
xpadding: 10,
backgroundcolor: '#fff',
bordercolor: '#000',
borderwidth: 1,
bodyfontfamily: 'tahoma,verdana,arial, helvetica, sans-serif',
bodyfontsize: 13,
bodyfontcolor: '#000',
callbacks: {
title: function(tooltipitem, data) {
return; // hide title
},
label: function(tooltipitem, data) {
barcount = tooltipitem.index;
barindex = tooltipitem.datasetindex;
var label = data.datasets[barindex].data_alt[barcount];
return label;
},
}
},
scales: {
yaxes: [{
display: false,
scalelabel: {
display: true,
labelstring: 'denied charges ($)',
fontcolor: '#000',
fontsize: '15',
fontstyle: 'bold',
},
ticks: {
callback: function(value, index, values) {
return '$' + value.tolocalestring();
}
},
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.3/chart.min.js"></script>
<div id="container">
<canvas id="canvas"></canvas>
</div>
Source: stackoverflow.com
Related Query
- Chart.js - Tooltips overlapped by bar values
- How to display inline values in a stacked bar chart with Chart.js?
- Remove the label and show only value in tooltips of a bar chart
- 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
- Customize different tooltips of bar chart
- Chart.js stacked bar chart - sorting values in bar by value
- Chartjs Bar chart shows undefined values
- Display Bar chart values in the graph - ChartJS
- How to set custom Y Axis Values (Chart.js v2.8.0) in Chart Bar JS
- Bar chart with min height and zero values - ChartJs
- Stacked bar chart with chartjs with included values
- How to show the chartjs bar chart data values labels as text?
- 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
- 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
- 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
- Chart Js , loading data on selection but bar graph displaying old values as well on hovering
- How to assign values to different lables(legends) of my dataset of stacked bar chart
- hiding x-axes labels with 0 values on a bar chart
- Tooltips displaying "rgb(0,0,0)" instead of label value on bar chart
- Dynamically update values of a chartjs chart
- chart js 2 how to set bar width
More Query from same tag
- jquery - How to update line chart.js with multiple datasets
- Chart.js padding canvas
- How do we put labels on pie chart arcs - chart.js/vue-chart.js
- How to draw the circular progress bar in Chart.js Or any other JavaScript library in Angular 2
- How to change color of column in chart js
- Html5 web page with chartjs: loading an external json file and create a line chart
- how to change color of bar if its goes above avg score in mixed graph chart.js
- React passing a variable object to setState vs. an anonymous object to setState
- How can I add user inputted values to my chart.js line graph?
- chartjs Line chart: scale respect value on x-axis
- using data structures in chartjs
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- In rails Label X and Y axis in chart. Implemented through chartkick and chart.js
- Group data from CSV (D3.js & Chart.js)
- Sum of visible Points in ChartJs Bar Chart
- How to print multiple items with the same charts? any directions?
- Chart.js reduce canvas size without changing the size of the chart
- ChartJS align axis label to the top
- How to hide zero data value from chartjs?
- How to display currency in Chart js
- Chartjs extended doughnut with text tooltip issue
- Chartjs-node installation failing
- Chart.js - Styling Legend - ONE legend entry per line
- ChartJS update chart with multiple datasets
- Is there any way to show a tooltip for points which are not visible on the chart in Chart.js?
- How to pass sql query data onto the datasets field of chartjs using nodejs (ejs)
- drawing bar chart with Chart.js
- Set xAxes labels to format YYYY-MM-DD HH:mm:ss in Chart.js
- Show base64 image next to canvas with charts.js
- ChartJS not rendering after update