score:0
Accepted answer
this is mainly because the animation.oncomplete
event is called again when the legend is filtered.
you need to have an extra check like this dataset._meta[0].$filler.visible != false
to only show values for only visible datasets.
below is corrected code or fiddle for your reference -> https://jsfiddle.net/x164l2z9/
var ctx = document.getelementbyid("canvas").getcontext("2d");
var nomi = [2017, 2018, 2019];
var mychart = new chart(ctx, {
type: 'line',
data: {
labels: nomi,
datasets: [{
label: 'pp pervenuti',
data: [50, 30, 45],
backgroundcolor: "#8a0808",
fill: false,
bordercolor: "#8a0808",
borderwidth: 3
},
{
label: 'pp evasi',
data: [60, 45, 12],
backgroundcolor: "#0b610b",
fill: false,
bordercolor: "#0b610b",
borderwidth: 3
},
{
label: 'pi pervenuti',
data: [20, 25, 35],
backgroundcolor: "#8a0886",
fill: false,
bordercolor: "#8a0886",
borderwidth: 3
},
{
label: 'pi evasi',
data: [10, 20, 30],
backgroundcolor: "#0404b4",
fill: false,
bordercolor: "#0404b4",
borderwidth: 3
}
]
},
options: {
legend: {
display: true,
position: "bottom"
},
hover: {
animationduration: 0
},
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) {
if (dataset._meta[0].$filler.visible != false) {
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);
}
}
}
});
}
}
}
});
Source: stackoverflow.com
Related Query
- Chart.js the value on the graph does not disappear when deselected
- chart does not change the values when the variable changes the value
- Angular-Charts bar chart does not update when I change the data, series, labels
- Chart.js returns a console error and does not display the chart when using variables as data input
- The real time chart sometimes does not display when I switch the target
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Why can I not see a data value when hovering over a point on the radar chart?
- Chart.js chart does not display when inside an ngIf.
- Showing 'undefined%' in the graph if data does not exist
- Chartjs does not render chart when set responsive option to true
- Charts.js does not render chart until I open the console
- Bar chart (chart.js) with only 2 points does not show one of the bars
- ChartJs does not render chart when binding canvas id in Angular
- ChartJs (ver: 2.8.0): Custom tooltip does not hide if clicked (or mouse pointer is moved) outside the chart canvas area
- Chart is not populating when getting the data from AJAX call
- React-chart does not render the legend for PIE chart
- graph (chartjs.org) does not stretch properly when sidebar(menu) is collapsed
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- The chart is not getting shown when page is loaded
- chartjs line graph destroy function is not clearing the old chart instances
- Background color does not work when trying to create my data before using scatter chart with chart.js
- Chart.js - Line chart does not render all points when using Point[] format
- Chart.js with line chart and bar chart - bar chart not rendered although the max value of it is shown
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- Chart JS: Donut/Doughnut Chart: Tooltip to be shown always for all the data. All tooltip is not shown when multiple data are with 0 data
- The data that is called in chart does not match the database
- Moving vertical line when hovering over the chart using chart.js
- Html chart does not fit a small Android WebView
- Wkhtmltopdf does not render Chart.JS 2.5.0 graph
- Angular-chart.js - Make line chart does not curve
More Query from same tag
- chart.JS time axis labels should be just in hours format
- Why doesn't Chart.js display my output (result of a const function)?
- How to create single value Doughnut or Pie chart using Chart.js?
- How do I change the label and value like 500,000 to 500k in Chart.js?
- How do I update the chart to reflect local storage values?
- create a chart.js point dataset from json
- How to convert UNIX timestamp to date using chart.js?
- chart js bar chart not displaying array
- Tooltip callbacks in line chart JS not working
- How can I control the placement of my Chart.JS pie chart's legend, as well as its appearance?
- ChartJs bar chart bar value displaying lower then Y axis value in pdf?
- 'require is not defined' error when attempting to use chartjs in javascript code
- Passing Json using JsonResult not working properly
- Rotate chart "pie" to need value or angle
- How can I create a bar chart that has multiple yAxes scales?
- ChartJS tooltip issue
- Shorten number labels in Charts.js
- ChartJS Line Chart - Points Connected out of order for Timeseries in Angular 6
- Horizontal bar with two yaxes chart js
- Chartjs - my old data show sometimes, bugs?
- Chart.js bar chart with time on X axis and category on Y axis is not rendered
- ChartJS - Returning labels and data from server on different calls
- Set DataSource Of Chart.JS To Array
- how to group the chart
- How to inject “Chart.js” to my module?
- Implementing a choropleth chart using chartjs-chart-geo plugin with react-chartjs-2
- Custom data position on the doughnut chart in chart.js
- Stacked horizontal bar chart along total count with chart.js
- how to show several labels and data's in the chart.js similar to npmtrend website?
- Graph getting messed up when user resizes page