Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Creating dimensions in React"
description: "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."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/xbubmyokgb
codeFolder: course/module_07/lesson_07.03/code/end
---

# Creating dimensions

<CodeSandboxEmbed
  src="//codesandbox.io/s/vbot7?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/src/Timeline.jsx"
  style={{width: '100%', height: '35em'}}
/>

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:

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.