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: "Drawing our canvas in React"
description: "We create our wrapper and bounds within our Chart component to prevent from having to repeat ourselves for every chart we create."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/g8szmguaij
codeFolder: course/module_07/lesson_07.04/code/end
---

## Drawing our canvas

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

Next up, we need to create our canvas. Since we'll want a canvas for all of our charts, we can put most of this logic in the `Chart` component. Let's add a `Chart` to our render method and pass it our `dimensions`.

```javascript
<div className="Timeline" ref={ref}>
  <Chart dimensions={dms}>
  </Chart>
</div>
```

When we look at our dashboard again, not much has changed. Let's open up `src/Chart/Chart.jsx` to see what we're starting with.

`Chart` is a very basic functional React component — it asks for only one prop: `dimensions`.

A>We're defining `useDimensionsContext()` at the top of our file as an empty function to prevent import errors in another file. We'll update it in a minute.

```javascript
export const useDimensionsContext = () => {}

const Chart = ({ dimensions, children }) => (
  <svg className="Chart">
    { children }
  </svg>
)
```

The `children` in a `Chart` can be any component from our chart library (or raw SVG elements). Each of these components might need to know the dimensions of our chart — for example, an `Axis` component might need to know how tall to be. Instead of passing `dimensions` to each of these components as a prop, we can create a React Context that defines the dimensions for the whole chart.

We create our wrapper and bounds within our Chart component to prevent from having to repeat ourselves for every chart we create.