Chart. An accessible bar or line chart with optional data table.
- Technical content
- Static
- Stability · Experimental
- ::postkit-chart
Readers by channel
Monthly audience growth across owned channels.
Newsletter
Web
Usage.
<Chart
title="Readers by channel"
description="Monthly audience growth across owned channels."
data='[{"label":"June","newsletter":28,"web":52},{"label":"July","newsletter":41,"web":68},{"label":"August","newsletter":57,"web":83}]'
series='[{"key":"newsletter","label":"Newsletter"},{"key":"web","label":"Web"}]'
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| dataRequired | JSON string | None | A JSON array of labeled data records. |
| series | JSON string | None | A JSON array describing the values to graph. |
| titleRequired | string | None | The visible and accessible chart title. |
| headingLevel | "2" | "3" | "4" | "5" | "6" | None | Renders the title as a heading at this level. Leave it unset and the title is a paragraph, so the chart never breaks the page's heading outline. |
| description | string | None | A concise explanation of the chart. |
| type | "bar" | "line" | "bar" | The chart presentation. |
| showTable | boolean | false | Whether to show an accessible source-data table. |
| Appearance | |||
| size | "sm" | "md" | "lg" | "md" | The component density and type scale. |
| variant | "outline" | "subtle" | "plain" | "subtle" | The component visual treatment. |
Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles
Anatomy. Every part is yours to restyle.
Every part
- root
- title
- description
- legend
- legendItem
- legendSwatch
- plot
- svg
- gridLine
- axisLabel
- seriesMark
- emptyState
- tableContainer
- table
- headerCell
- rowHeader
- dataCell
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailAs text
- Astro @postkit/astroStatic
- Web components @postkit/elementsPlanned