Chart

Line and bar charts with legend, tooltips, and responsive sizing.

import{ Chart } from "@pepulux/ui"

Line chart

8,400
6,720
5,040
3,360
1,680
0
JanFebMarAprMayJun

Bar chart

240
192
144
96
48
0
JanFebMarAprMayJun

Props

PropTypeDefaultDescription
chartStyle"line" | "bar""line"Chart type
xLabelsstring[]—X-axis labels (one per data point)
series*ChartSeries[]—Array of { label, data: number[], color? }
legend"none" | "top" | "right""top"Legend position
heightnumber300Chart height in pixels
yAxisLabelstring—Y-axis label text
xAxisLabelstring—X-axis label text
Application component → Chartswww.pepulux.com

Notes and documentation

Space for notes, documentation, and best practices for using these components.

Make the data the hero

Choose the chart that matches the question: lines for trends, bars for comparison, donuts for parts of a whole. Limit categories so colours stay distinguishable.

Always label axes and provide the underlying numbers for assistive technology.

Do

  • Start bar charts at zero

Don't

  • Use more than six series in one chart