score:4
Accepted answer
you can fix the problem with an update to chart.js 2.9.3 and passing an empty hover
function:
<html>
<head>
</head>
<body>
<canvas id="container"></canvas>
<script src="https://pagecdn.io/lib/chart/2.9.3/chart.bundle.min.js"></script>
</body>
</html>
let barchartdata = {
labels:[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29],
datasets: [{
label: 'sessions',
backgroundcolor: 'rgba(0,163,224, 0.7)',
bordercolor: 'rgba(0,163,224, 1)',
borderwidth: 1,
data:[81, 69, 60, 51, 37, 35, 45, 65, 86, 58, 64, 39, 48, 29, 69, 80, 52, 61, 56, 40, 51, 31, 70, 51, 32, 51, 27, 30, 44, 59, 46]
}]
};
const id = 'container';
let ctx = document.getelementbyid(id).getcontext("2d");
let chart = new chart(ctx, {
type: 'bar',
data: barchartdata,
options: {
responsive: true,
"animation": {
"duration": 1,
"oncomplete": function () {
let chartinstance = this.chart, ctx = chartinstance.ctx;
ctx.font = chart.helpers.fontstring(chart.defaults.global.defaultfontsize, chart.defaults.global.defaultfontstyle, chart.defaults.global.defaultfontfamily);
ctx.textalign = 'center';
ctx.textbaseline = 'bottom';
ctx.fontcolor = 'black'
this.data.datasets.foreach(function (dataset, i) {
let meta = chartinstance.controller.getdatasetmeta(i);
meta.data.foreach(function (bar, index) {
let data = dataset.data[index];
ctx.filltext(data, bar._model.x, bar._model.y - 5);
});
});
}
},
hover: () => {},
plugins: {
datalabels: {
color: '#000000'
}
},
legend: {
display: false
},
tooltips: {
enabled: true,
mode: 'label'
},
}
});
this fix doesn't work with chart.js 2.7.3. i don't know if it's a bug or a different behavior on purpose.
Source: stackoverflow.com
Related Query
- chart.js bar chart datalabel vanishes on hovering over chart
- canvas fill text vanishes when hovering over chartjs pie chart
- Problems hovering over ChartJS bar chart after being redrawn
- ChartJS: Highlight dataset in a stacked bar chart when hovering over the legend?
- Chartjs Bar Chart showing old data when hovering
- Moving vertical line when hovering over the chart using chart.js
- ChartJs line chart repaint glitch while hovering over
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Chart Js V2 draw Horizontal Bar(Average) Over Vertical Bar
- Hovering over chart.js values in Meteor onRendered function causes chart axis shift
- Chart.js bar chart mouse hovering highlights all the datasets instead of just the selected one
- how to customize tool tip while mouse go over bars on Chart js bar chart
- Angular-chartjs Data labels over bar chart
- Highlight chart element when hovering over its corresponding legend Item
- Chartjs Bar Chart showing old data when hovering when use of ajax
- Hovering over line chart shows old chart data issue in chart.js
- Give '%' on Bar Chart Datalabel Chartjs
- ReactJS - Moving vertical line when hovering over Line chart using chart.js v3.7.1
- Moving vertical line when hovering over the chart using chart.js in v2.9.4
- Chart.js stacked bar chart iterate over datasets
- Charts with previous data appear when hovering the cursor over the chart in Chart.js
- Chart Js , loading data on selection but bar graph displaying old values as well on hovering
- Data label over stacked bar chart
- Trigger bar/pie graph highlight when hovering over an external element [chart.js / chart js] [AngularJS] [angular-chart.js]
- chart js 2 how to set bar width
- Chart.js: Bar Chart Click Events
- Chartjs v2.0: stacked bar chart
- Horizontal stacked bar chart with chart.js
- Chart.js Bar Chart - how to chart bars from 0
- Horizontal bar chart in chart.js
More Query from same tag
- How to force animation on chartjs?
- How do I populate chart.js labels with array items?
- In a bar graph can the lower numbers be made to have the taller bars?
- Render Chart on second template by clicking icon on the first template
- How do i find area under the graph
- How to use Chart.js with Typescript without getting assignable errors?
- Type can not be assigned in react-chartjs-2
- using react-chartjs-2 , How can I save my chart as png using a download button
- Chart Js Cannot read property 'length' of undefined
- Can we draw a Line Chart with both solid and dotted line in it?
- How pass a variable from code behind to javascript
- How can I create a horizontal scroll effect with angular-chart.js and chart.js
- How can I merge multiple HTTP calls to one entity model in Angular
- How to create a line chart indicating which month a user wrote more or less blogs?
- Chartjs 2 scaling lots of data points
- Laravel DB select statement. Query returns column name as result rather than values
- chart.js barchart without set fill color
- How to get the X position at a specified chart item index?
- Create Chart using Reactjs Chartjs and axios
- Chart.js - disable tooltip when cursor moves outside the main canvas
- Chart.JS: How to make sharp lines to smooth curved lines
- ChartJS: Draw vertical line at data point on chart on mouseover
- chartjs plot datetime value with time offset on the grid
- Chart.js plugins overlapping tooltips
- Chartsjs multi-axis, make the scale appear/disappear when the dataset is activated/deactivated
- How to make bars different colours in Chart.js with csv data?
- Charts are overlapping with old values on mouse hover
- Chart.js not to be begin in Y-Axis
- Chart.js Change color of the values *inside* the bars of a Bar chart
- chartjs bar chart align the legend to left position