Creating dimensions in React
Creating dimensions in React can be really easy! We use a custom hook for watching the size of our wrapper and automatically calculating the dimensions of our bounds.
Next up, we need to specify the size of our chart. In our dashboard, we could have Timelines of many different sizes. Each of these Timelines are also likely to change size based on the window size. To keep things flexible, we'll need to grab the dimensions of our container
We could implement this by hand by creating a React ref, querying the size of
ref.current, and instantiating a Resize Observer to update on resize. Because we'll use this same logic in multiple chart types, we created a custom React hook called
useChartDimension will accept an object of dimension overrides and return an array with two values:
a reference for a React ref
dimensionsobject that looks like: