Skip to content
Get Pro
Trends

Area Chart

A smooth line over a surface that fades to nothing beneath it.

$149 once · every Pro piece

Customize

Scrub with a pointer, a finger or the arrow keys: a hairline snaps to the nearest point, a hot dot rides the line, the stretch round the cursor stays bright while the rest dims, and the big readout top-left rolls to the value with heavier digits in the higher places. New data morphs over half a second. Optional layers: the kiln sky (a warm glow rising off the line), gradient, solid or hatched fills, a trend line, a projection with a widening cone, a Bollinger envelope or a band of normal, dashed min, max and average lines with pills, a threshold past which the line runs hot, event badges and sparks that ping as the crosshair passes, an afterglow that marks where you scrubbed, a dashed previous period with the change in the readout, drag-to-select a span, a brush strip, a live stream with a pilot light, and loading and empty states.

Install

npx shadcn@latest add @obsyde/area-chart

Needs your licence key · Get Pro

Usage

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

import { AreaChart } from '@/components/obsyde/ember/area-chart/AreaChart';

export function Example() {
  return (
    <AreaChart />
  );
}

Files

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

  • ember/area-chart/AreaChart.tsxcomponent
  • ember/area-chart/area-chart.cssstyles
  • ember/area-chart/AreaChartDemo.tsxdemo
  • 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/States.tsxshared
  • 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'
rangeSwitchRange switchbooleanfalse
readoutReadout'corner' | 'tooltip''corner'
fillFill'gradient' | 'solid' | 'pattern' | 'none''gradient'
skyKiln skybooleanfalse
glowGlowbooleanfalse
markersMarkers'none' | 'ring' | 'dot''none'
trendTrend'none' | 'dashed' | 'gradient''none'
projectionProjection'none' | 'regression' | 'target''none'
bandEnvelopebooleanfalse
bandRangeBand of normalbooleanfalse
refLinesReference lines'none' | 'min-max' | 'avg' | 'median' | 'all''none'
thresholdThreshold'none' | 'above' | 'below''none'
thresholdValueThreshold valuenumber70
annotationsAnnotationsbooleanfalse
sparksSparksbooleanfalse
afterglowAfterglowbooleanfalse
compareComparebooleanfalse
tailDashed tailbooleanfalse
selectionSelect a spanbooleanfalse
brushBrush zoombooleanfalse
yTicksY ticksnumber4
showAxisAxesbooleantrue
tooltipTooltip'none' | 'panel' | 'corner''none'
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''solid'
dotsDots'halo' | 'ring' | 'none''halo'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
backgroundBackground'grid' | 'dots' | 'hatch' | 'none''grid'
curveCurve'monotone' | 'linear' | 'catmull' | 'step''monotone'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
statusStatus'ready' | 'loading' | 'empty''ready'
valueLabelsValue labelsbooleanfalse
liveLivebooleanfalse
heightHeightnumber220
pointsPointsnumber30
seedSeednumber7