Playground — Stacked Area 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/stacked-area-chart

Stacked Area Chart Playground

Experiment with StackedAreaChart props in real time. Stacked area charts show how individual series contribute to a total over a continuous axis, making them excellent for revenue breakdowns, resource allocation, and composition trends. Toggle the normalize option to switch between absolute values and a 100% view.

Dataset:

Area

Curve

Area Opacity

Show Line

Normalize (100%)

Interaction

Enable Hover

Layout

Show Grid

Show Legend

Labels

X Label

Y Label

Title

Generated Code

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

JSX

import { StackedAreaChart } from "semiotic" const data = [ { quarter: 1, amount: 120, product: "Software" }, { quarter: 1, amount: 80, product: "Hardware" }, { quarter: 1, amount: 40, product: "Services" }, // ...3 products across 8 quarters ] <StackedAreaChart data={data} />