Charts

Chart components built on Chart.js. Available: PrimusLineChart, PrimusBarChart, PrimusPieChart, PrimusSparkline.

Preview · Charts

Code

HTML · @primus/ui-core

<div class="card" style="padding:1.5rem;max-width:480px;width:100%">
  <div class="card-label" style="margin-bottom:0.75rem">Revenue Trend — Jan to Jun</div>
  <div style="display:flex;align-items:flex-end;gap:6px;height:80px">
    <div style="flex:1;background:var(--primary);opacity:0.35;border-radius:3px 3px 0 0;height:38%"></div>
    <div style="flex:1;background:var(--primary);opacity:0.5;border-radius:3px 3px 0 0;height:52%"></div>
    <div style="flex:1;background:var(--primary);opacity:0.65;border-radius:3px 3px 0 0;height:66%"></div>
    <div style="flex:1;background:var(--primary);opacity:0.75;border-radius:3px 3px 0 0;height:58%"></div>
    <div style="flex:1;background:var(--primary);opacity:0.88;border-radius:3px 3px 0 0;height:82%"></div>
    <div style="flex:1;background:var(--primary);border-radius:3px 3px 0 0;height:100%"></div>
  </div>
  <div style="display:flex;justify-content:space-between;font-size:0.7rem;color:var(--muted-foreground);margin-top:6px">
    <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span>
  </div>
</div>

React

import { PrimusLineChart, PrimusBarChart, PrimusPieChart, PrimusSparkline } from 'primus-react-ui';

const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
const series = [{ label: 'Revenue', data: [40, 55, 70, 60, 85, 100] }];

<PrimusLineChart labels={labels} series={series} height={280} />
<PrimusBarChart  labels={labels} series={series} height={280} />
<PrimusPieChart
  labels={['Starter', 'Pro', 'Enterprise']}
  series={[{ label: 'Plans', data: [30, 50, 20] }]}
  height={280}
/>
<PrimusSparkline series={series} height={48} />

Angular

<primus-line-chart [labels]="labels" [series]="series" [height]="280"></primus-line-chart>
<primus-bar-chart  [labels]="labels" [series]="series" [height]="280"></primus-bar-chart>
<primus-pie-chart  [labels]="pieLabels" [series]="pieSeries" [height]="280"></primus-pie-chart>
<primus-sparkline  [series]="series" [height]="48"></primus-sparkline>

Props

Prop	Type	Default	Description
labels	string[]	[]	X-axis labels
series	ChartSeries[]	required	Data series
height	number	320	Chart height in px
width	number	—	Chart width in px (defaults to container)
legend	boolean	true	Show legend
responsive	boolean	true	Resize with container
options	object	—	Chart.js options override

TypeScript interfaces

interface ChartSeries {
  label: string;          // Legend label e.g. 'Revenue'
  data:  number[];        // One value per label
  color?: string;         // Override series colour
}

// Example — multi-series line chart
const labels  = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
const series: ChartSeries[] = [
  { label: 'Revenue', data: [40000, 52000, 61000, 58000, 74000, 89000] },
  { label: 'Costs',   data: [28000, 31000, 35000, 33000, 41000, 44000] },
];

// PieChart / DoughnutChart — one data point per label
const pieSeries: ChartSeries[] = [
  { label: 'Plans', data: [30, 50, 20] }  // matches labels: ['Starter','Pro','Enterprise']
];

Version history

See the Changelog for version history and breaking changes.