Playground — Donut Chart — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/playground/donut-chart

Donut Chart Playground

Experiment with DonutChart props in real time. Donut charts are ideal for showing proportional breakdowns at a glance. Adjust the inner radius to control the hole size, tweak the start angle for orientation, and use slice padding to separate segments. Copy the generated code when you have the look you want.

Dataset:

Donut

Inner Radius

Start Angle

Interaction

Enable Hover

Layout

Show Legend

Labels

Title

Generated Code

The link restores this exact configuration; the config is a portable ChartConfig artifact.

JSX

import { DonutChart } from "semiotic" const data = [ { category: "Housing", amount: 1850 }, { category: "Food & Dining", amount: 720 }, { category: "Transportation", amount: 480 }, { category: "Healthcare", amount: 350 }, { category: "Entertainment", amount: 280 }, { category: "Savings", amount: 620 }, ] <DonutChart data={data} />