Chart

Seventeen variant containers, eighty-four variants and six usage frames - forty-six finished charts and the thirty-eight parts they are assembled from.

Chart · Components frameLive in the browser · drawn to match the file
Family
Type
JanFebMarAprMayJun
Chart / Area Chart · Type=Basic · Gradient=Yes5 types in the file
Eighty-four, in two halves

Finished charts, and the parts they are made of

The page splits down the middle by namespace. Singular Chart / is a finished chart you drop in - forty-six of them. Plural Charts / is a part you build one out of - thirty-eight. Both are published, because a bar and a chart made of bars are different things to reach for.

Chart / … · 46 finished charts
Area Chart5 types
Bar Chart9 types
Line Chart7 types
Pie Chart5 types
Radar Chart9 types
Radial Chart6 types
Charts / … · 38 parts
Bar Rectangle10
Type × Horizontal × Active - one bar, ten ways
Area Chart10
Type × Gradient, the only chart with a fill switch
Bar Layer6
Rectangles 1-3 × Horizontal
Radar Grid4
Type × Filled
Tooltip / Tooltip Item4
Default · Icon · Line · Total
Dot3
Custom × Size
Dot on Stroke3
6 · 8 · 10
Grid2
Horizontal True or False
Legend Item2
Default · Icon
Pie Pie2
Stroke Yes or No
Radar Label Wrapper2
Default · Custom
At real size

The parts every chart shares

Charts / Tooltip · 139 × 86
January
Desktop186
Mobile80
Tablet45
Charts / Legend · 288 × 16
DesktopMobileTabletOther
Charts / Dot · 3 variants
8
12
8 custom
Charts / Bar Chart / Rectangle · Active

Every other colour in the kit is bound to a semantic token. The five series colours are not - they are raw hex on the shapes: #6366F1, #06B6D4, #8B5CF6, #10B981, #F59E0B. Rebranding the kit moves every surface except these, so a chart palette is a separate decision and a separate edit. Worth knowing before you promise a client that one token set changes everything.

Six example frames

One frame per family, not one for the page

Chart is the only page in the kit with six usage frames instead of one. Each family gets its own, because a page holding every chart in the set would be four thousand pixels of scrolling before you found the one you came for.

FrameSize
Area Chart786 × 2404
Bar Chart1128 × 2784
Line Chart1128 × 2248
Pie Chart1128 × 1712
Radar Chart1128 × 2784
Radial Chart1128 × 1712
In the file

Seventeen containers, eighty-four variants

Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.

Chart / Area ChartType × GradientBasic · Linear · Step · Stacked · Stacked Expanded × Yes · No10
Chart / Bar ChartTypeBasic · Horizontal · Stacked · Multiple · Label · Custom Label · Mixed · Negative · Active9
Chart / Radar ChartTypeBasic · Dots · Multiple · Lines Only · No lines · Grid Custom · Grid Filled · Grid Circle · Grid Circle Filled9
Chart / Line ChartTypeBasic · Linear · Step · Multiple · Dots · Dots Colors · Label7
Chart / Radial ChartTypeBasic · Label · Grid · Text · Shape · Stacked6
Chart / Pie Chart / Donut and FullTypeBasic · Active · Stacked, and Basic · Label5
Charts / … (the parts)variousBar Rectangle 10 · Bar Layer 6 · Radar Grid 4 · Tooltip Item 4 · Dot 3 · Dot on Stroke 3 · Grid 2 · Legend Item 2 · Pie 2 · Radar Label Wrapper 238
Seven standalonesnoneTooltip · Legend · Pie Label List · Pie Label Wrapper · Donut Interactive · Radar Radius Axis · Radar Label7

Using the Chart

Singular Chart / is a finished chart you drop straight in - forty-six of them across six families. Plural Charts / is a part you build one out of: a bar, a dot, a grid, a tooltip row - thirty-eight. Both are published because reaching for a bar and reaching for a bar chart are different jobs.

Yes. The five are #6366F1, #06B6D4, #8B5CF6, #10B981 and #F59E0B, and they sit as raw hex on the shape because a chart palette is not a semantic role: there is no base.series-3 for it to bind to. Rebranding through the token sets moves every other surface and leaves the chart palette where it is, so treat it as a separate edit.

Because an area chart is the only family where the fill under the line is the point. Ten variants is five types times that switch. Everywhere else the fill is either solid or absent and there is nothing to toggle.

Chart is the only page in the kit with more than one. A single frame holding every chart in the set would be several thousand pixels tall, so each family gets its own - Area, Bar, Line, Pie, Radar, Radial - and you open the one you came for.

Data display · 84 variants