` element accepts a few `data-` attributes, some of which
are required and some of which are optional.
Let's cover a few important ones. And while we do it, we'll create a custom dashboard that shows a few CPU-related
charts on a single page.
### The chart unique ID (required)
You need to specify the unique ID of a chart to show it on your custom dashboard. If you forgot how to find the unique
ID, head back over to [step 2](https://github.com/netdata/netdata/blob/master/docs/guides/step-by-step/step-02.md#understand-charts-dimensions-families-and-contexts)
for a re-introduction.
You can then put this unique ID into a `
` element with the `data-netdata` attribute. Put this in the `` of
your custom dashboard file beneath the helpful comment.
```html
My custom dashboard
```
Reload the page, and you should see a real-time `system.cpu` chart!
... and a whole lot of white space. Let's fix that by adding a few more charts.
```html
```
### Set chart duration
By default, these charts visualize 10 minutes of Netdata metrics. Let's get a little more granular on this dashboard. To
do so, add a new `data-after=""` attribute to each chart.
`data-after` takes a _relative_ number of seconds from _now_. So, by putting `-300` as the value, you're asking the
custom dashboard to display the _last 5 minutes_ (`5m * 60s = 300s`) of data.
```html
```
### Set chart size
You can set the size of any chart using the `data-height=""` and `data-width=""` attributes. These attributes can be
anything CSS accepts for width and height (e.g. percentages, pixels, em/rem, calc, and so on).
Let's make the charts a little taller and allow them to fit side-by-side for a more compact view. Add
`data-height="200px"` and `data-width="50%"` to each chart.
```html
```
Now we're getting somewhere!
## Final touches
While we already have a perfectly workable dashboard, let's add some final touches to make it a little more pleasant on
the eyes.
First, add some extra CSS to create some vertical whitespace between the top and bottom row of charts.
```html
```
To create horizontal whitespace, change the value of `data-width="50%"` to `data-width="calc(50% - 2rem)"`.
```html
```
Told you the `data-width` and `data-height` attributes can take any CSS values!
Prefer a dark theme? Add this to your `` _above_ where you added `dashboard.js`:
```html
```
Refresh the dashboard to give your eyes a break from all that blue light!
## The final `custom-dashboard.html`
In case you got lost along the way, here's the final version of the `custom-dashboard.html` file:
```html
My custom dashboard
My custom dashboard
```
## What's next?
In this guide, you learned the fundamentals of building a custom Netdata dashboard. You should now be able to add more
charts to your `custom-dashboard.html`, change the charts that are already there, and size them according to your needs.
Of course, the custom dashboarding features covered here are just the beginning. Be sure to read up on our [custom
dashboard documentation](https://github.com/netdata/netdata/blob/master/web/gui/custom/README.md) for details on how you can use other chart libraries, pull metrics
from multiple Netdata agents, and choose which dimensions a given chart shows.
Next, you'll learn how to store long-term historical metrics in Netdata!
[Next: Long-term metrics storage →](https://github.com/netdata/netdata/blob/master/docs/guides/step-by-step/step-09.md)