How to optimize chart rendering on canvas?

Question

JavaScript

Good afternoon.
Question 1)
A line chart is built on the basis of an array with ~30000 elements. (X axis - dates, Y - values)
At the beginning, I go through a loop to find the maximum value along the Y axis, then a loop to draw the axes and values ​​on them, and then another loop to draw the graph itself.
How can these 3 cycles be optimized so that the page does not freeze for a few seconds, as it happens now?
Question 2)
In the data on which the graph is based, the values ​​used for the Y-axis may be repeated. Since the data array is large, I want to display on the Y-axis, for example, no more than 20 values. How to choose the right unique values ​​to display in Y ?

Answer 1

Maybe I misunderstood something, but here is my solution . That is, we can view the graph, we draw only part of it. For the test, I also scored an array of 30k elements, nothing lags, I even tried lam, in principle, any value will be normal, since it only works with a few without iterating through the entire array.

Answer 2

Why canvas? On svg, as a rule, everything is much simpler, especially if some kind of interactivity is needed. If you want a ready-made one, look in the direction of what JRK_DV advised , if you want to write your own, then d3.js

Answer 3

graphs with a large amount of data are generally difficult to do, at some dataset size, any approach stops working.
specifically about the speed of simple rendering, the main thing is not to repaint the same pixels many times. if you, of course, do not have a graph that is 30 thousand pixels wide, then you have many readings drawn per column of pixels. therefore, you can select the data that fall into this group, take the minimum and maximum from them (if the range does not touch the past, stretch it to its border) and draw it with one line.