Chart
Simple bar chart using theme variables. Pass a data array of { label, value }. For complex charts, use Chart.js or Recharts with these classes.
Add this component
Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.
Choose your package manager — click a tab to select, then copy the command.
Live Example
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Chart from '../components/astro/Chart.astro';
---
<Chart data={[{ label: 'A', value: 40 }, { label: 'B', value: 65 }, { label: 'C', value: 30 }]} />
<!-- Rizzo CSS. BEM: chart, chart__bars, chart__bar-wrap, chart__bar, chart__label. -->
<div class="chart" role="img" aria-label="Bar chart">
<div class="chart__bars">
<div class="chart__bar-wrap"><div class="chart__bar" style="height: 40%;"></div><span class="chart__label">A</span></div>
<div class="chart__bar-wrap"><div class="chart__bar" style="height: 65%;"></div><span class="chart__label">B</span></div>
<div class="chart__bar-wrap"><div class="chart__bar" style="height: 30%;"></div><span class="chart__label">C</span></div>
</div>
</div>
<script>
import { Chart } from '$lib/rizzo';
</script>
<Chart data={[{ label: 'A', value: 40 }, { label: 'B', value: 65 }, { label: 'C', value: 30 }]} />
<script setup>
import Chart from '@/components/rizzo/Chart.vue';
</script>
<template>
<Chart :data="[{ label: 'A', value: 40 }, { label: 'B', value: 65 }, { label: 'C', value: 30 }]" />
</template>
import { Chart } from './components/react';
<Chart data={[{ label: 'A', value: 40 }, { label: 'B', value: 65 }, { label: 'C', value: 30 }]} />
Other frameworks: Vanilla · Svelte · Vue · React
npm 
pnpm 
yarn 
bun