Svelte Toolkit

Pie Chart

A simple SVG pie chart for displaying data.

Demo

Item1 35Item2 25Item3 45

Properties

Name Default Description Change
size 200 The size of the chart, in pixels
radius 50 The size of the chart's radius as a percentage of size
cutout 0 The size of the chart's cutout as a percentage of size
labels The labels to display for each segment
values The value to display for each segment
colors The color to display for each segment

Code

import { PieChart } from "svelte-toolkit";

<PieChart
  size={200}
  radius={50}
  cutout={0}
  data={[
    {
      label: "Item1",
      value: 35,
      color: ""
    },
    {
      label: "Item2",
      value: 25,
      color: ""
    },
    {
      label: "Item3",
      value: 45,
      color: ""
    }
  ]} />