Skip to content
Get Pro
Utilities

Chart Annotations

The chart kit layers that explain data, each on a real chart.

$149 once · every Pro piece

Customize

The selected value as a dashed leader with a hot value pill, the one accent on a grey chart. A band of normal with inward brackets and tinted axis ticks under a Bollinger envelope; only stretches past the limit run hot. A least-squares trend that tweens to its new fit. A projection with a widening cone and a horizon dot. A code freeze over weekend stripes, with a brush whose outside is dimmed and blurred. A dashed tail for the day still counting. Event badges above the plot whose stacks fan out in an arc on hover. Events as sparks on the line that ping as the crosshair passes while the scrubbed path glows and cools. And a pilot light on the last point that breathes while data is fresh and goes ash when it stops.

Install

npx shadcn@latest add @obsyde/chart-annotations

Needs your licence key · Get Pro

Usage

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

import { ChartAnnotationsDemo } from '@/components/obsyde/ember/chart-annotations/ChartAnnotationsDemo';

export function Example() {
  return (
    <ChartAnnotationsDemo view="reference" />
  );
}

Files

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

  • ember/chart-annotations/ChartAnnotationsDemo.tsxcomponent
  • ember/chart-annotations/chart-annotations.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/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Brush.tsxshared
  • ember/viz-kit/Axis.tsxshared
  • ember/viz-kit/annotations.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
viewView'reference' | 'band' | 'trend' | 'projection' | 'deadline' | 'tail' | 'markers' | 'sparks' | 'pilot' | 'select''reference'
fillFill'pattern' | 'gradient' | 'solid''pattern'
trendTrend'gradient' | 'dashed' | 'solid''gradient'
projectionProjection'regression' | 'last-segment' | 'target''regression'
liveLivebooleantrue
valueLabelsValue labelsbooleantrue
curveCurve'monotone' | 'linear' | 'catmull' | 'step''monotone'
seedSeednumber8