`<bmx-sparkline>`

A trend the size of a word, for a table cell, a card or a sentence: a line, an area, columns, wins and losses, or a bullet (one value against a target). It sits inline with the text around it.

12 properties · 0 events · 0 methods · 2 parts

Example

Plan	Last 12 weeks	Weeks up or down	Against target
Starter
Team
Enterprise

Sparklines sit in a line of text too: sign-ups this month are up on last month. A screen reader hears each as a sentence; the pointer reads each value.

Show markup

<table class="ex-sp-table" lang="en-GB" style="border-collapse: collapse; inline-size: 100%; max-inline-size: 40rem">
  <thead>
    <tr>
      <th scope="col" style="text-align: start">Plan</th>
      <th scope="col" style="text-align: start">Last 12 weeks</th>
      <th scope="col" style="text-align: start">Weeks up or down</th>
      <th scope="col" style="text-align: start">Against target</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" style="text-align: start">Starter</th>
      <td><bmx-sparkline values="12,14,13,17,19,18,22,24,23,27,29,31" label="Starter plan, last 12 weeks" markers="minmax"></bmx-sparkline></td>
      <td><bmx-sparkline type="winloss" values="1,-1,1,1,-1,1,1,-1,1,1,1,1" label="Starter plan, weeks up or down"></bmx-sparkline></td>
      <td><bmx-sparkline type="bullet" values="0.86" target="0.8" band="0.7,0.9" max="1" format="percent" label="Starter plan against target"></bmx-sparkline></td>
    </tr>
    <tr>
      <th scope="row" style="text-align: start">Team</th>
      <td><bmx-sparkline type="area" values="30,28,31,26,24,25,22,23,20,21,19,18" label="Team plan, last 12 weeks"></bmx-sparkline></td>
      <td><bmx-sparkline type="winloss" values="-1,1,-1,-1,1,-1,1,-1,1,-1,-1,-1" label="Team plan, weeks up or down"></bmx-sparkline></td>
      <td><bmx-sparkline type="bullet" values="0.62" target="0.8" band="0.7,0.9" max="1" format="percent" label="Team plan against target"></bmx-sparkline></td>
    </tr>
    <tr>
      <th scope="row" style="text-align: start">Enterprise</th>
      <td><bmx-sparkline type="column" values="4,6,-2,5,7,3,8,-1,6,9,7,10" label="Enterprise plan, last 12 weeks" labels="W1,W2,W3,W4,W5,W6,W7,W8,W9,W10,W11,W12"></bmx-sparkline></td>
      <td><bmx-sparkline type="winloss" values="1,1,-1,1,1,1,1,-1,1,1,1,1" label="Enterprise plan, weeks up or down"></bmx-sparkline></td>
      <td><bmx-sparkline type="bullet" values="0.93" target="0.8" band="0.7,0.9" max="1" format="percent" label="Enterprise plan against target"></bmx-sparkline></td>
    </tr>
  </tbody>
</table>

<p class="note" style="margin-block-start: 1rem">
  Sparklines sit in a line of text too: sign-ups this month
  <bmx-sparkline values="3,5,4,8,6,9,12" label="Sign-ups this month"></bmx-sparkline>
  are up on last month. A screen reader hears each as a sentence; the pointer reads each value.
</p>

Revenue

A screen reader hears a sentence in its place - "6 values from 4 to 12, ending at 12, up 200% from the first" - and the pointer reads each value.

Properties

Property	Attribute	Type	Default	Description
`band`	`band`	`readonly number[] \| string`	—	A shaded band of normal values: `[low, high]`, or `"low,high"`.
`format`	`format`	`BmxChartNumberFormat \| string`	—	How values are written: `percent`, `currency:EUR`, `decimal:1`, `compact`, or the object.
`label`	`label`	`string`	—	What the values are, read before the description ("Revenue, last six months").
`labels`	`labels`	`readonly string[] \| string`	—	Names for the values, read by the pointer ("Jan,Feb,Mar").
`locale`	`locale`	`string`	—	A BCP 47 locale for numbers. Default: the page's `lang`.
`markers`	`markers`	`'none' \| 'last' \| 'minmax' \| 'all'`	`'last'`	Dots on `none`, the `last` value (default), the `minmax` and last, or `all`.
`max`	`max`	`number`	—	The top of the scale. Default: the highest value.
`min`	`min`	`number`	—	The bottom of the scale. Default: the lowest value.
`strings`	`strings`	`Partial<BmxSparklineStrings> \| string`	—	Words it is read with, to translate: any of `BmxSparklineStrings`. JSON in markup.
`target`	`target`	`number`	—	A bullet's target.
`type`	`type`	`BmxSparklineType`	`'line'`	`line` (default), `area`, `column`, `winloss` or `bullet`.
`values`	`values`	`readonly (number \| null)[] \| string`	—	The values, oldest first: a list, or comma-separated in markup. An empty entry is a gap.

CSS shadow parts

Part	Description
`sparkline`	the drawing.
`tooltip`	the value under the pointer.

CSS custom properties

Property	Description
`--bmx-sparkline-band`	The band of normal values.
`--bmx-sparkline-color`	The line, area and columns.
`--bmx-sparkline-height`	How tall it is. Default 1.4em.
`--bmx-sparkline-high`	The highest value's marker.
`--bmx-sparkline-low`	The lowest value's marker.
`--bmx-sparkline-negative`	Columns below zero, and losses.
`--bmx-sparkline-width`	How wide it is. Default 6em.