How to create an area chart in Notion

You can create an area chart in Notion from the numbers in a Notion database. The chart shows how those numbers change over time, with the area under each line filled in. You can stack up to twelve series to see each part and the total.

Notion data

Chart types take Notion data. An area chart reads one Notion database. Its Label Field groups your Notion rows into the labels of the chart. Its Value Fields are the number properties that set the values. When you leave Value Fields empty, the chart counts how many rows share each label. If a property does not appear in the list of values, check that it is a Notion number property.

Create an area chart and embed it in Notion

If the create dialog shows No Notion datasources found, click Sign in with Notion to connect Notion, and then start again at step 1.

1. In the Blocky dashboard, click Create widget.
2. Under Category, choose Chart.
3. Under Widget type, choose Area. This is the area chart.
4. Under Style, choose a template, such as Normal. Then click Continue to data.
5. In Notion Datasource, choose your Notion database.
6. In Label Field, choose the property that groups your rows into labels.
7. In Value Fields, choose one or more number properties, or leave it empty to count rows.
8. Click Open editor.
9. Change the text, colors, and settings of the chart in the editor.
10. Click Save. Blocky publishes the chart and opens the dashboard.
11. On the card of the chart, click Copy.
12. In Copy embed link, copy the link on the Public tab. Anyone who has a Private link can use it, so use a private link only on pages that you control.
13. In Notion, open the page for the chart. Type /embed, choose Embed, and paste the link.
14. Confirm the embed. If the chart needs more space, resize the embed block.

Templates

The create dialog lists the templates of the area chart under Style:

• Normal (Normal area chart). Smooth curves with a strong fill under each line, so the shape of the trend stands out.
• Linear (Linear area chart). Straight lines join the values, with a lighter fill below. Each change from one label to the next shows as a clear angle.
• Step (Step area chart). Flat steps with a light fill, so each value holds until midway to the next label and every change is a sharp jump.

Inputs

In the editor, select Widget in the Elements panel, and then open the Inputs tab. Its Source section sets the Notion data of the chart:

• Notion database is the database that the chart reads.
• Labels from is the property that groups your rows into labels.
• Values from takes up to 12 number properties. Leave it empty to count rows.
• Refresh data applies your picks and loads their data.

To change the look of the chart, select the chart in the Elements panel, and then open the Appearance tab. It has settings such as Series, Area, Bottom labels, Left values, Grid lines, Highlight range, Legend, Hover card, and Timeline scroller.