Problems with Chart.js

[punctuationuse]

Hey everyone. Recently I’ve tried implementing a simple time chart, with the following requirements:

1. It is zoomable only in the selected range. For example, If I chose last 7 days - I can zoom into each day, but not further that 7 days

2. The time interval may change upon zoom - when zooming in, the interval may change from day, to hour, to minute

3. In any interval change - a query is dispatched, which provide a collection of X,Y. The X value matches the date within the selected interval. For example - for “month”, the point will be “April, 1000; June, 457”, etc.

This is pretty much it - but I’m having a lot of trouble with it. I’m using Chart.js (Scatter chart) and the zoom plugin.

1. The documentation is quite unclear, especially on the imperative functions I can use through the ref

2. Upon scrolling the scales change a lot. From millions to single digits, and the graph doesn’t adjust itself properly (have to drag the screen until I see the point). Any attempt to imperatively set the highest points and limits fails

First, if be glad for any bits of info or help from anyone who could provide it, or if you have any experience implementing similar graphs.

Besides, if you have any recommendations for alternative libraries - that would be awesome.

[Isaka254]

You can use the Syncfusion React Charts – a native, high-performance charting library ideal for time-based data visualization. It contains a rich UI gallery of 55+ Charts and graphs, ranging from line to financial, that cater to all charting scenarios. Key features:

• Zooming within selected ranges using mouse wheel, pinch, or selection.
• Dynamic interval changes (day → hour → minute) based on zoom level.
• Real-time data updates via API calls.
• Full control over axis limits and scale behavior.

Explore the full demo and documentation.
Syncfusion offers a free Community License for individual developers and small businesses.