[Question]: Support for automatic time scale resizing

[olegrok]

What’s your question?
The common issue with this charts is resizing series to fit the chart container. Actually, i use time scale api to trigger resize event when needed. But this leads to bloated code - i need to get time scale api by providing ref and create an effect which is going to listen for data changes and trigger resize.

const timeScaleRef = useRef(null);

useEffect(() => {
  if (!timeScaleRef.current) return;
  timeScaleRef.current.api().fitContent();
}, [...my-triggers]);

return (
<Chart>
  ...
  <TimeScale ref={timeScaleRef} />
</Chart>
);

This is a woking solution, but the problem is i don't like to make the same setup in every component/project where i use this charts. Is there a built-in way to trigger time scale resize event?

[ukorvl]

Hey @olegrok,

This functionality is really very common, thanks for highlighting this!

Since v0.3.4 a special TimeScaleFitContentTrigger component designed to ease developer's life is introduced to the library. It has deps prop where you can pass array of any amount of resize triggers.
Following the "React approach" you can provide an empty array to trigger the resize only once when chart is initialized, which is probably the most common scenario.

<TimeScale>
  <TimeScaleFitContentTrigger deps={[]} />
</TimeScale>

If you need to keep the content resized dynamically, for instance, any time chart data updates, you can provide chart data as a trigger, like:

<CandlestickSeries
  data={seriesData}
/>
<TimeScale>
  <TimeScaleFitContentTrigger deps={[seriesData]} />
</TimeScale>

Please ensure that you have the latest library version installed.