Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-bar-chart>
A horizontal bar chart comparing one value across named items, e.g.
requests per second per server.
Properties
Property
Attribute
Type
Default
Description
data
data
BarDatum[]
[]
The bars, drawn in this order unless sort is set. Non-finite values are skipped; negatives draw as zero.
label
label
string
""
The chart's accessible name, e.g. "Requests per second, higher is better".
highlight
highlight
string
""
Name of the item to emphasise.
sort
sort
"" | "desc" | "asc"
""
desc or asc sorts by value; anything else keeps the given order.
unit
unit
string
""
A unit appended to values, e.g. "req/s".
format
property only
(n: number) => string
formatNumber
Formats values (default: compact numbers).
CSS parts
Part
Description
chart
The rows container.
tooltip
The hover/focus readout.
CSS custom properties
Property
Description
--lit-material-chart-series-1
Bar colour without highlight, and the highlighted bar's colour by default.
--lit-material-bar-chart-highlight
The highlighted bar's colour.
--lit-material-bar-chart-muted
The other bars' colour when highlight is set.
--lit-material-bar-chart-name-width
Width of the name column (112px).
<lit-material-line-chart>
A line chart for one to eight series over a shared x axis (numbers or
times).
Properties
Property
Attribute
Type
Default
Description
series
series
ChartSeries[]
[]
label
label
string
""
The chart's accessible name, e.g. "Requests per second, last 10 minutes".
height
height
number
240
Height in px.
yMin
y-min
number | undefined
none
Lower bound of the y axis (default 0, or the data's minimum if it's negative).
formatX
property only
(x: number) => string
formatNumber
Formats x values for the axis, tooltip and table (default: numbers).
formatY
property only
(y: number) => string
formatNumber
Formats y values (default: compact numbers).
unit
unit
string
""
A unit appended to y values in the tooltip and table, e.g. "req/s".
CSS parts
Part
Description
chart
The chart area.
legend
The legend.
tooltip
The hover/focus readout.
CSS custom properties
Property
Description
--lit-material-chart-series-1
First series colour (… through -8).
<lit-material-sparkline>
A sparkline: a word-sized line showing the shape of a series, beside the
number it explains (a stat tile, a table cell). No axes, so it states its
range for screen readers: "label: latest X, from MIN to MAX".