This video is available to students only

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.

Creating dimensions#

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 <div>.

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 useChartDimensions.

useChartDimension will accept an object of dimension overrides and return an array with two values:

  1. a reference for a React ref

  2. a dimensions object that looks like:


This page is a preview of Fullstack D3 Masterclass

Start a new discussion. All notification go to the author.