Skip to content
Pelatform UI

Data displayExtension

Chart

A line, area, bar or donut chart drawn from a native data table, which stays available as the fallback.

Class nameTypeDescription
chartplf:chartComponentThe figure that holds the data table
chart-viewplf:chart-viewPartThe box the script adds before the data and fills, or an empty, hidden one the page places
chart-frameplf:chart-framePartThe chart layout the script adds
chart-plotplf:chart-plotPartThe drawing area the script adds
chart-canvasplf:chart-canvasPartThe focusable canvas the script adds
chart-legendplf:chart-legendPartThe legend the script adds
chart-legend-buttonplf:chart-legend-buttonPartA series toggle the script adds
chart-legend-labelplf:chart-legend-labelPartA toggle's name the script adds
chart-swatchplf:chart-swatchPartA toggle's color the script adds
chart-tooltipplf:chart-tooltipPartThe values tooltip the script adds
chart-tooltip-titleplf:chart-tooltip-titlePartThe tooltip's category the script adds
chart-tooltip-valuesplf:chart-tooltip-valuesPartThe tooltip's value list the script adds
chart-tooltip-labelplf:chart-tooltip-labelPartA series name the script adds
chart-tooltip-valueplf:chart-tooltip-valuePartA formatted value the script adds
chart-dataplf:chart-dataPartThe data table disclosure
chart-data-toggleplf:chart-data-togglePartThe disclosure's summary
chart-data-scrollplf:chart-data-scrollPartThe table's scroll region
chart-emptyplf:chart-emptyPartThe message the script adds, shown when nothing is left to draw
chart-helpplf:chart-helpPartThe keyboard instructions the script adds
chart-statusplf:chart-statusPartThe screen-reader status the script adds

Default

The table is the data source and the accessible alternative: it needs a caption, which names the canvas, one header row and one body without merged cells, each row starting with a unique <th scope="row">.

Revenue over time

January–June 2026 · USD

View data table
Revenue over time
Month Recurring Expansion
Jan $12,400 $2,800
Feb $13,800 $3,400
Mar $12,900 $3,100
Apr $16,200 $4,200
May $17,800 $4,800
Jun $19,600 $5,600

Area

Revenue over time

January–June 2026 · USD

View data table
Revenue over time
Month Recurring Expansion
Jan $12,400 $2,800
Feb $13,800 $3,400
Mar $12,900 $3,100
Apr $16,200 $4,200
May $17,800 $4,800
Jun $19,600 $5,600

Bar

Signups by channel

2026 · Sample data

View data table
Signups by channel
Quarter Organic Referral
Q1 420 180
Q2 560 240
Q3 610 320
Q4 740 390

Compact

data-plf-axes="x" keeps the category labels alone, for a small chart in a card. A chart with one series has no legend, and whole amounts show no decimals.

Monthly revenue

January–June 2026

View data table
Monthly revenue
Month Revenue
Jan $15,200
Feb $17,200
Mar $16,000
Apr $20,400
May $22,600
Jun $25,200

Stacked bar

Signups by channel

2026 · Sample data

View data table
Signups by channel
Quarter Organic Referral
Q1 420 180
Q2 560 240
Q3 610 320
Q4 740 390

Donut

A donut takes exactly one series with no negative values; its legend toggles the categories.

Subscribers by plan

2026 · Sample data

View data table
Subscribers by plan
Plan Subscribers
Free 1,260
Pro 680
Team 340
Enterprise 120

Data from a request

The chart follows its table, so add the rows your request returns to it. Until then, the chart shows data-plf-empty.

Visitors this week

Monday–Sunday · Sample data

View data table
Visitors this week
Day Visitors

JavaScript

Chart needs JavaScript and is an extension: the Full script and Full CSS leave it out. The keyboard instructions under a chart show while it has keyboard focus, and screen readers read them as it takes focus. The Full script (pelatform-ui.min.js) and the extension scripts after it start every component on page load, with no code of your own; with Core and single files, the last line starts them. For markup you add later, see Dynamic content.

<link rel="stylesheet" href="pelatform-ui.min.css">
<link rel="stylesheet" href="extensions/chart.min.css">
<script src="pelatform-ui.min.js" defer></script>
<script src="extensions/chart.min.js" defer></script>
<link rel="stylesheet" href="pelatform-ui.prefixed.min.css">
<link rel="stylesheet" href="extensions/chart.prefixed.min.css">
<script src="pelatform-ui.min.js" defer></script>
<script src="extensions/chart.min.js" defer></script>

With ESM imports, install the optional chart.js peer, import Chart from @pelatform/ui/extensions/chart and call use(Chart) before init().

Hooks

Attribute Purpose
data-plf-chart The chart element, such as a <figure>
data-plf-chart-view Optional; on an empty, hidden chart-view, places the chart there instead of before the data table
data-plf-series Optional, on a value column’s th scope="col": the series key that setVisibility(), the state and events use; the header’s text by default
data-plf-value On each value cell, the number as a plain decimal; the displayed text is never read. Leave it out for a gap
data-plf-type line (default), area, bar, stacked-bar or donut
data-plf-axes all (default), or x for the category labels alone, with no value axis or grid; a donut has no axes
data-plf-currency An ISO 4217 currency code such as USD or IDR
data-plf-format decimal (default), currency (default when a currency is set) or percent, where 0.25 shows as 25%
data-plf-locale A language tag such as id or en-GB for number formats; any locale the browser’s Intl knows. The nearest lang, then en by default
data-plf-help, data-plf-legend-label Translated keyboard instructions and legend name; English by default, the legend Chart visibility
data-plf-empty The message when nothing is left to draw; No data to show. by default

Methods

Method Behavior
PLF.Chart.getOrCreateInstance(figure, options) Returns the instance, creating it for valid markup; options (type, axes, format, currency, locale, help, legendLabel, empty) override the attributes
PLF.Chart.getInstance(figure) Returns the instance or null
instance.setType(type) Changes the chart type. Returns false when canceled, unchanged or invalid, such as a donut with more than one series
instance.setVisibility(key, visible) Shows or hides a series by its key, or a category on a donut by its row header
instance.refresh() Rereads the colors after you change them; the chart follows its table, data-plf-empty and its root’s theme by itself. Returns true when the data changed
instance.getState() Returns a copy with type, labels, series, hiddenSeries, hiddenCategories, activeIndex, empty and the number settings
instance.destroy() Removes the drawn chart and its listeners and shows the table again

Events

Event When
plf:chart:before-change Before a type, visibility or table change; cancelable except for a table change, which has already happened
plf:chart:change After the change is drawn

Each event’s detail:

Property Value
instance The Chart instance
trigger The legend button used, otherwise null
reason type, visibility, or refresh after a table change
previousState The state before the change, shaped like getState()
state The state after the change

Keyboard

Key Action
Left Arrow, Right Arrow On the canvas, show the previous or next category’s values; reversed right to left
Home, End Show the first or last category’s values
Escape Close the values tooltip

CSS variables

The canvas reads its colors when it draws, so call refresh() after changing them.

Variable Default
--plf-chart-height 16rem (256px)
--plf-chart-color Text
--plf-chart-radius --plf-radius-md, 0.375rem (6px), on the canvas
--plf-chart-bar-radius --plf-radius-sm, 0.25rem (4px), on bars
--plf-chart-series-1 … --plf-chart-series-6 Primary, info, success, warning, danger and muted text; repeated after six
--plf-chart-axis-color Muted text
--plf-chart-grid-color --plf-color-border-subtle
--plf-chart-bg Surface, between donut segments
--plf-chart-tooltip-bg, --plf-chart-tooltip-color Surface and text
--plf-chart-tooltip-border --plf-color-border-subtle

Built with Pelatform UIv0.1.0

Components

Getting started

Foundations

Components

Actions

Data display

Navigation

Feedback

Data input

Layout

Advanced

Integrations

Blocks

Application

Authentication

Icons