I am having issues with anychart with vue.js where UI freezes with data points that are spaced by couple of milliseconds and sometimes there are larger gaps.
Using xScale('datetime') fixes this issue but to be inline with previous UI I need to use xScale('scatter') which causes the slow rendering and UI freezing.
Package versions
Anychart: latest
Series: RangeArea
Simple code to reproduce the issue
Even with only 4 points it takes around 10s to render the chart. Increasing the TS (item1) of the last element in the array code increases rendering time even more.
Run the code here: https://playground.anychart.com/api/data/_samples/anychart.data.Table.addData
anychart.onDocumentReady(function () {
// --- Function to provide data
function getLocalData() {
return [
{ item1: 1756719874033, item2: -0.004548928737640345, item3: 21.274999618530273 },
{ item1: 1756719874034, item2: 0.0033239805698394853, item3: 21.274999618530273 },
{ item1: 1756719874035, item2: -0.00489378213882441, item3: 21.274999618530273 },
{ item1: 1756719974035, item2: -0.004548928737640345, item3: 21.274999618530273 }
//,
//{ item1: 1762428309051, item2: -0.004548928737640345, item3: 21.274999618530273 }
].map(function (point) {
return [point.item1, point.item2];
});
}
// --- Get data from the function
const data = getLocalData();
// --- Create data table and add data
const dataTable = anychart.data.table();
dataTable.addData(data);
// --- Map the data (timestamp, value)
const mapping = dataTable.mapAs({ value: 1 });
// --- Create chart and plot
const chart = anychart.stock();
chart.xScale('scatter');
//chart.grouping().enabled(true).maxVisiblePoints(200);
const plot = chart.plot();
plot.line(mapping);
chart.title('Custom Data from Function');
chart.container('container');
chart.draw();
});