score:1
i suspect that it works in fact correctly.
code sample before some possible explaination:
var ctx = document.getelementbyid("mychart");
var nbpoints = 1000;
var samplespoints = 100;
var thresholdspoints = 900;
var dataarr = []
for (let i = 0; i < nbpoints; i++) {
dataarr.push({x: i, y: math.floor(math.random() * 100)})
}
var mychart = new chart(ctx, {
type: 'line',
data: {
datasets: [{
label: '# of votes',
data: dataarr
}]
},
options: {
parsing: false,
normalized: true,
animation: false,
responsive: false,
plugins: {
decimation: {
enabled: true,
samples: samplespoints,
threshold: thresholdspoints,
algorithm: 'lttb'
},
zoom: {
limits: {
x: { min: 0, max: nbpoints }
},
pan: {
enabled: true,
mode: 'x'
},
zoom: {
wheel: {
enabled: true
},
pinch: {
enabled: true
},
mode: 'x'
}
}
},
scales: {
x: {
type: 'linear'
}
}
}
});
function resetzoom() {
mychart.resetzoom();
}
.mychartdiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://npmcdn.com/chart.js@3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://npmcdn.com/chartjs-plugin-zoom@1.2.1/dist/chartjs-plugin-zoom.min.js"></script>
<div class="mychartdiv">
<canvas id="mychart" width="600" height="400"></canvas>
</div>
<div class="mybutton">
<button onclick="resetzoom()">reset zoom</button>
</div>
it was due to a modification that was proposed a while ago: the idea was to re-perform decimation each time you zoom in order to have the "highest resolution" possible (for history: https://github.com/chartjs/chart.js/issues/8833)
but the thing that you probably missed (i suppose) are the following properties of the decimation plugin (https://www.chartjs.org/docs/master/configuration/decimation.html#configuration-options):
- samples: how many points you want to have after decimation
- threshold: above which number of point you want the decimation happen. often, you might want samples = threshold, but that is not mandatory.
and the "problem" is probably the default values of each of these:
- sample: defaults to the canvas width to pick 1 sample per pixel.
- threshold: defaults to 4 times the canvas width.
meaning that for a 800px graph, you will have 800 points, and decimation will happen only if you have more than 800*4 points on the current range.
so what i suppose is happening: you have let say 1000 points that you display on a 200px graph. at first everything is ok, but once you zoom, you have 750 points, which will be less than 200*4, so decimation won't happen and you will have in fact 750 points (while you would expect 200)
in the end, you might want to update your decimation plugin configuration with something like:
decimation: {
enabled: true,
algorithm: 'lttb',
samples: 800,
threshold: 800
}
Source: stackoverflow.com
Related Query
- chart.js v3 - data decimation not working with zoom plugin
- Chart JS not working with Dynamic Data
- Chart JS not showing On hover with small data
- Chartjs not working with d3 from csv source
- Doughnut Chart not displaying data with Chart Js and Backbone js
- Chart JS not working with date
- Chartjs with Vue, Bar Chart Border Radius not working
- Chart js data decimation not working, parsing issue
- Chart JS not working with Phonegap
- Updating chart.js not working after recieved new data from database with ajax
- Legend color not working with randomly generated background colors in chartjs pie chart
- Chart.js not rendering chart with data from mySQL database
- chart js download to png with canvas.toDataURL() not working in IE and firefox
- donut chart not rendering with csv data chart.js
- Firefox is not responding when loading 800+ data sets in Bar Chart with Charts.Js
- Annotation plugin not working with Chart.js 2.8.0
- Chart js plugin annotation not working in vue
- Background color does not work when trying to create my data before using scatter chart with chart.js
- Position of the x-axis labels is not in sync with the line chart data points
- Unable to get chartjs to draw a chart with dynamic data (variable not hardcoded)
- Why chart is not working with Bootstrap Modal?
- 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
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS - Draw chart with label by month, data by day
- line chart with {x, y} point data displays only 2 values
- Using CSS variables (color) with chart.js - "var(--primaryColor)" not working
- Bootstrap grid not working with canvas
- How to display data labels outside in pie chart with lines in ionic
- Chartjs - data format for bar chart with multi-level x-axes
- ChartJs line chart - display permanent icon above some data points with text on hover
More Query from same tag
- change axis scale to be round numbers instead of decimal - chart.js
- chartjs resizing very quickly (flickering) on mouseover
- How to increase Chart.js yAxes' height to prevent overlapping
- Writing blank on canvas using fillText
- Call ChartJS details in main Javascript file
- How do I prevent the scale labels from being cut off in chartjs?
- Create data structure in c# for multiple series charts
- Plot a multi-line graph from grouped JSON object using Charts.js
- Chart.js not displaying in box
- Chartjs 3.x Migration Guide notes on animation not working
- add shadow for line in vue chartjs
- Best API/code library to build a timeline/chart
- Stacked areachart with percents values on the y axis using Charts.js and Angular 8
- How to I optimise these javscript options which is used multiple times on different chart.js graphs?
- ChartJS Horizontal Bar is displaying backwards
- chart js not dispalying data array that comes from an axios request
- How to add a custom event on legend click
- Dynamic array javascript
- Chart content not getting loaded in popup
- Angular 2 - Invoking function from a JS file (chart.js) - function not found
- How to pass dynamic string as dataset in charts.js
- How to create multi scale chart?
- How to refresh chart in django without refreshing whole page
- Chartjs with JSP
- Add Y-Axis dynamically Chartjs
- I have a chart but it is not updating the chart with react chart-js-2
- ChartJs functional component does not refresh even when forceUpdate
- chart.js: Chart in chart
- ChartJS multiple tooltip callbacks not working
- How do I add an image in the middle of Donut Chart?(Chart.js)