[ZoomBar] graph_view has performance problems

[sstone2423]

I am submitting a...

• [x] Feature request
• [x] Design defect

charts version: v0.34.10

Issue description

The graph_view zoomBar is actually rendering a second chart causing performance problems when there are many data points.

Current behavior

A second chart is being rendered in the zoombar

Expected behavior

Don't render the second chart and instead render a static, generic graph image if there are too many data points.

Maybe this could be a prop to toggle static vs dynamic?

[theiliad]

What you're talking about isn't possible, unless we use canvas to generate an image (which is still the same thing but would just perform a bit better). Are you asking for a prop for you to provide an image? That also wouldn't really be dynamic...

[theiliad]

This is also exactly why I pushed for the slider view. It is significantly more efficient performance-wise

[theiliad]

Might be a bit advanced for a hacktoberfest PR, but if someone does end up looking into this, basically what needs to happen is: within the zoom bar component we'll need to investigate using Canvas instead of SVGs to draw the graph. hopefully this'll improve performance

[scottdickerson]

@theiliad I can take a look at this one, we need it pretty bad

[MoritzKronberger]

For anybody else running into this issue, adding an empty data array to the zoombar options like this:

zoomBar: {
    top: {
        enabled: zoomBar,
        data: [],
    },
}

avoids running setZoomBarData and, at least for me, improved performance drastically while still rendering the preview chart. I haven't had the time to look into why, but I thought it might be worth sharing anyways.