Skip to content
Pinky UI

data

Comparison Chart

Two aligned series reveal values, direction and the gap between them at one readable point.

  • data
  • chart
  • comparison
  • difference
  • series

Live preview

Sun
Studio 78Team 69
Difference -9
Studio and team comparisonTwo aligned series. Focus the chart and use arrow keys to compare values and their difference at each label.

The solid circle, outlined square and direct difference rail keep the comparison readable without relying on colour alone.

Quick usage

usage
import { ComparisonChart } from "@pinky-ui/systems";

<ComparisonChart labels={labels} series={[productA, productB]} label="Product comparison" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
series[ComparisonChartSeries, ComparisonChartSeries]—Two aligned series sharing the same labels.
classNamestring—Styles the outer interaction surface.

Accessibility

  • The reading rail publishes both values and a signed difference at the active label.
  • Line style, marker shape, direct labels and text values reinforce series identity beyond colour.

Performance

  • Two SVG paths and one local active index keep comparison updates bounded.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Reading a meaningful gap between two aligned measures

When not to use

  • More than two series or unrelated categories that need a table

Skill

Purpose

Two aligned series reveal values, direction and the gap between them at one readable point, rather than requiring the reader to subtract two independent lines.

Good for

  • Reading a meaningful gap between two aligned measures

Avoid for

  • More than two series or unrelated categories that need a table

Usage

tsx
<ComparisonChart labels={labels} series={[productA, productB]} label="Product comparison" />

Accessibility

  • The reading rail publishes both values and a signed difference at the active label.
  • Line style, marker shape, direct labels and text values reinforce series identity beyond colour.

Performance

  • Two SVG paths and one local active index keep comparison updates bounded.

Related: interactive-line-chart, comparison-bars.

Open this skill on its own page