CSS Pie Chart

Lightweight data visualization with circular charts

npm run add CSSPieChart

Use the CSSPieChart component to create responsive and lightweight circular charts to visually represent data proportions. Use them to visualize data like percentages, progress, or distribution, or to illustrate statistics in dashboards and reports. They’re created using CSS which makes them a dependency-free, lightweight solution compared to external libraries.

---
const pieChartData = [
    {
        name: 'Astro',
        amount: 43,
        color: '#4e00c2'
    },
    { ... },
    { ... }
]
---

<CSSPieChart data={pieChartData} />

The component only expects a data prop that defines each slice in the pie using an array of objects. Each object can have the following properties:

• name: The name that identifies the slice. It’ll show up in the legend.
• amount: The size of the slice. Can be an arbitrary number or percentage. Percentages will be automatically calculated.
• color: The color of the slice.

Rotation

To customize the visual appearance of the pie, you can rotate it by a number of degrees using the pieRotation prop:

<CSSPieChart data={pieChartData} pieRotation={90} />
<CSSPieChart data={pieChartData} pieRotation={120} />

Donuts

The component can also be used to create donut charts. Simply set the donut prop to true to turn the pie chart into a donut chart:

<CSSPieChart data={pieChartData} donut={true} />

By default, the center of the donut will take the default background color (var(--w-color-primary-70)). If you need to change this, you can specify a custom color using the donutCenterColor prop:

<CSSPieChart
    data={pieChartData}
    donut={true}
    donutCenterColor="var(--w-color-primary-60)"
/>

You can also customize the size of the donut using the donutSize prop. This is set to 50 by default. The smaller the number, the smaller the hole becomes:

<CSSPieChart data={pieChartData} donut={true} donutSize={40} />
<CSSPieChart data={pieChartData} donut={true} donutSize={30} />

Legends

When using the component, the chart will automatically generates a legend under the chart with the percentages. This can be turned off with the showLegend prop. Percentages can also be disabled separately using the showLegendPercentage prop, or it can be replace with the amount property specified in your data prop using the showLegendAmount.

• showLegend: Sets whether the legend should be shown.
• showLegendAmount: Sets whether the amount property should be shown in the legend.
• showLegendPercentage: sets whether the calculated percentages should be shown in the legend.

<CSSPieChart data={pieChartData} showLegendPercentage={false} />

<CSSPieChart
    data={pieChartData}
    showLegendAmount={true}
    showLegendPercentage={false}
/>

<CSSPieChart data={pieChartData} showLegendAmount={true} />

API

type CSSPieChartProps = {
    data: {
        name: string
        amount: number
        color: string
    }[]
    pieRotation?: number
    donut?: boolean
    donutSize?: number
    donutCenterColor?: string
    showLegend?: boolean
    showLegendAmount?: boolean
    showLegendPercentage?: boolean
    className?: string
}