Chart widgets — Blocky Docs

Blocky has 6 chart Widget types: the Area chart, Bar chart, Line chart, Pie chart, Radar chart, and Radial chart. Each one draws the rows of a Notion database. This page lists the templates, the Inputs, and the Parts of each chart. The controls that every widget shares, such as Size, Colors, and Corners, are on the settings page.

Create a chart

In the create dialog, pick Chart under Category, the chart in Widget type, and a template under Style. Then click Continue to data, choose the Notion database, and set Label Field. Create a widget gives every step.

A chart has no Template menu in the editor, so pick its template in the create dialog.

Inputs of every chart

The Inputs tab of a chart has one section, the Data source. Its heading, Source, has a pill that says From Notion when the chart shows your Notion data, or Sample data when it shows sample data.

Notion database is the database that the chart reads.
Labels from is the property that groups your rows into chart labels.
Values from holds up to 12 number properties. Each one is a series of the chart. Leave it empty to count the rows of each label.
Refresh data loads the data again with your choices.

Connect Notion data to widgets explains the Notion steps.

Parts of every chart

The chart Element holds the chart itself. A widget can have only one chart. These Parts are in every chart:

Part	What it is
Series	The value columns that the chart draws, one row for each series. Each row sets the name and the look of one series.
Legend	The names and colors under or over the plot. It lists the series in most charts. The Pie chart lists the category names in their Slice colors. The Radial chart lists the category names in their Ring colors, unless Values from has two or more properties.
Hover card	The card that follows the pointer across the plot.

Each chart also has its own Parts, listed below.

Area chart

In the create dialog, the Area chart is Area. It has 3 templates: Normal, Linear, and Step. Its Inputs tab has the chart Data source.

The Area chart Element has these Parts:

Part	What it is
Area	The filled shape of each series. Its Part Points is a dot on each value.
Bottom labels	The category names under the plot.
Left values	The value scale.
Right values	The second value scale, for series on the right axis. It appears when a series uses the right axis.
Grid lines	The reference lines behind the plot.
Highlight range	A shaded band between two values.
Timeline scroller	A range under the plot that you drag to zoom into rows.

Bar chart

In the create dialog, the Bar chart is Bar. It has 2 templates: Normal and Horizontal. Its Inputs tab has the chart Data source.

The Bar chart Element has these Parts:

Part	What it is
Bars	One bar for each row and series.
Value labels	The number on each bar.
Bottom labels	The category names. When the bars lie flat, this Part is Side labels.
Left values	The value scale. When the bars lie flat, this Part is Bottom values.
Right values	The second value scale, for series on the right axis. When the bars lie flat, this Part is Top values.
Grid lines	The reference lines behind the plot.
Highlight range	A shaded band between two values.

Line chart

In the create dialog, the Line chart is Line. It has 3 templates: Normal, Linear, and Step. Its Inputs tab has the chart Data source.

The Line chart Element has these Parts:

Part	What it is
Line	One line for each series. Its Part Points is a dot on each value.
Value labels	The number on each point.
Bottom labels	The category names under the plot.
Left values	The value scale.
Right values	The second value scale, for series on the right axis. It appears when a series uses the right axis.
Grid lines	The reference lines behind the plot.
Highlight range	A shaded band between two values.
Timeline scroller	A range under the plot that you drag to zoom into rows.

Pie chart

In the create dialog, the Pie chart is Pie. It has 2 templates: Normal and Donut. Its Inputs tab has the chart Data source.

The Pie chart Element has these Parts:

Part	What it is
Slice colors	One color for each slice.
Pie	The shape of the slices.
Slice labels	The value on each slice.

Radar chart

In the create dialog, the Radar chart is Radar. It has 2 templates: Normal and Circle. Its Inputs tab has the chart Data source.

The Radar chart Element has these Parts:

Part	What it is
Radar	The filled shape of each series. Its Part Points is a dot on each value.
Grid	The web behind the data.
Category labels	The names around the web.
Value scale	The rings, the range, and the value numbers.

Radial chart

In the create dialog, the Radial chart is Radical. It has 2 templates: Normal and Grid. Its Inputs tab has the chart Data source.

The Radial chart Element has these Parts:

Part	What it is
Ring colors	One color for each ring. When Values from has two or more properties, the rings use the Series colors and this Part has no effect.
Rings	One ring for each row.
Ring labels	The name of each ring. When Values from has two or more properties, each label shows the value of its ring.
Center text	A total in the middle.

To see each template before you create a chart, open the chart widgets in the Widget catalogue.