Chart Legend

Every legend layout from the chart kit, wired to real charts through one focus store.

$149 once · every Pro piece

Customize

View

Marker

Click toggles

Hold also locks

Show share

Series

Curve

Seed

Hover a row and the other series step back to a fifth of their strength everywhere; hover a line or a ring and its row lights up as a filled pill. Click a row to switch a series off: it fades out, the row goes ash with a hollow swatch and the axis tweens to what is left. Shift+click a row to lock the isolation; tap the legend or press Esc to let go (press-and-hold locking is an option). Rows are a roving keyboard group: arrows move, Enter toggles, Shift+Enter isolates. Layouts: a row, a list with rolling values and shares, progress rows on concentric rings, Less-to-More levels on a heat grid and a continuous gradient with a caret.

Install

npx shadcn@latest add @obsyde/chart-legend

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { ChartLegendDemo } from '@/components/obsyde/ember/chart-legend/ChartLegendDemo';

export function Example() {
  return (
    <ChartLegendDemo view="row" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/chart-legend/ChartLegendDemo.tsxcomponent
ember/chart-legend/chart-legend.cssstyles
ember/viz-kit/viz-kit.cssshared
ember/viz-kit/Tooltip.tsxshared
ember/viz-kit/focus.tsshared
ember/viz-kit/patterns.tsxshared
ember/viz-kit/roll.tsshared
ember/shared/rolling-number.cssshared
ember/shared/spring.tsshared
ember/shared/accent.tsshared
ember/viz-kit/scale.tsshared
ember/viz-kit/motion.tsshared
ember/viz-kit/chart.tsxshared
ember/shared/ember.cssshared
ember/viz-kit/touch.tsshared
ember/viz-kit/keyboard.tsshared
ember/viz-kit/size.tsshared
ember/viz-kit/shape.tsshared
ember/viz-kit/series.tsxshared
ember/viz-kit/Legend.tsxshared
ember/viz-kit/Grid.tsxshared
ember/viz-kit/demo.tsxshared
ember/viz-kit/demo.cssshared
ember/viz-kit/Axis.tsxshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`view`View	`'row' \| 'list' \| 'progress' \| 'levels' \| 'gradient'`	`'row'`
`marker`Marker	`'dot' \| 'line' \| 'dash' \| 'ring' \| 'square' \| 'pattern'`	`'dot'`
`toggle`Click toggles	`boolean`	`true`
`hold`Hold also locks	`boolean`	`false`
`percent`Show share	`boolean`	`true`
`series`Series	`number`	`4`
`curve`Curve	`'catmull' \| 'monotone' \| 'linear' \| 'step'`	`'catmull'`
`seed`Seed	`number`	`4`