Composition chart

Free

Parts of a whole with a comparison to the previous period.

Installs components/ui/composition-chart.tsxDepends on d3-shapeMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/composition-chart.json

Revenue by plan250 k

Revenue by plan
Part	Value	Share	Previous
Solo	42	16.8%	38
Team	88	35.2%	70
Studio	120	48.0%	128

When to use #

Use it for

Mix shifts, such as revenue by plan versus last quarter.
A readable alternative to a pie.

Skip it when

There is no previous period.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/composition-chart.json

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { CompositionChart } from "@/components/ui/composition-chart"

export function RevenueMix() {
  return (
    <div className="w-full max-w-md">
      <CompositionChart
        label="Revenue by plan"
        unit="k"
        data={[
          { id: "solo", label: "Solo", value: 42, previous: 38 },
          { id: "team", label: "Team", value: 88, previous: 70 },
          { id: "studio", label: "Studio", value: 120, previous: 128 },
        ]}
      />
    </div>
  );
}

API reference #