Charts

Line, bar, pie, and sparkline charts in the site colors.

import { LineChart, BarChart, Sparkline, PieChart, BarList } from 'components/UI/Chart'

Line chart

Use a line chart for change over time. Each series is one line. Hover to see the values for a point.

Use a bar chart to compare values across categories.

Use a sparkline for a small trend line next to a number, such as in a stat card.

Pageviews

1.2M

Sessions

310K

Bounce rate

38%

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Give each chart a height, such as h-64. The chart fills its box. Sparkline takes a height prop instead (120px by default).
Series colors come from the site palette in order. Pass color on a series only when a color must mean something specific.
For other charts and props, see the Quill Storybook.