Examples
Live, interactive examples with full source code. Start simple, then explore dashboards, realtime data and more.
Every example is live: drag to pan, scroll or pinch to zoom. For everything at a glance, see the gallery.
General
Line
A line through one value per point, with a last-value label and magnet crosshair.
Curves & steps
Linear, monotone spline and step interpolation side by side.
Area
A line with a gradient fill derived from its color.
Band
An area between two values: a range or confidence interval.
Stacked area
Values stacked on top of each other, or normalized to 100%.
Bar
Rounded columns on a category axis.
Grouped bars
Several values per category, side by side.
Stacked bars
Stacked columns with an absolute or percent offset.
Histogram
Positive and negative values colored by sign.
Horizontal bars
Categories on the y axis, values along x, with pan and zoom.
Stacked horizontal bars
Progress by team as stacked or grouped horizontal bars.
Scatter
Points by group with marker shapes and a nearest-point tooltip.
Bubble
Bubbles whose area encodes a third value.
Error bars
Means with one standard deviation whiskers.
Numeric x axis
Unevenly sampled data on a continuous numeric axis.
Category x axis
One slot per category label.
Financial
Candlestick
Candles with a legend, last-value line and crosshair.
Hollow candles
Rising candles drawn as outlines, with a magnet crosshair.
Custom candle colors
A color per candle computed from the data.
Volume candles
Volume encoded in candle opacity and width.
OHLC bars
Open and close ticks on a high-low line.
HLC bars
High-low bars with a close tick only.
Heikin Ashi
Averaged candles that filter out noise.
Baseline
Two colors above and below a base value.
HLC area
The high-low range filled around the close.
Volume overlay
Volume bars on an overlay scale at the bottom of the price pane.
Volume pane
Volume in its own pane with compact labels.
Columns
One column per close, colored by change.
Volume profile
Volume by price for the visible range, with the point of control.
Session volume profiles
One volume profile per trading day.
Renko
Fixed-size bricks that ignore time.
Kagi
Reversal lines with yin and yang thickness.
Point & Figure
Columns of X and O boxes.
Line break
Three-line break boxes.
Scale modes
Linear, logarithmic, percent and indexed price scales.
Multiple scales
Two price scales with their own axes in one pane.
Indicators
Indicator panes
Overlays on the price pane and oscillators in their own panes.
Moving averages
SMA, EMA, WMA, HMA and VWMA on one chart.
Bands & channels
Bollinger, Keltner, Donchian and envelopes.
Oscillators
RSI, MACD, Stochastic, CCI, Williams %R, ROC, Momentum and ATR.
Trend
Parabolic SAR, Supertrend and Ichimoku.
Trend strength
ADX / DMI, Aroon and Elder Ray.
Indicator components
SAR, Stochastic, ATR, Elder Ray and Force Index as typed components.
Volume indicators
OBV, MFI and VWAP.
Crossover signals
EMA crossovers marked with buy and sell markers.
Custom indicator
Bollinger %B defined with defineIndicator.
Drawing tools
Drawing tools on a price chart
The full drawing toolbar on candlesticks: channels, Fibonacci, positions and price lines.
Fibonacci & Gann
Retracements, extensions and Gann fans.
Channels & pitchfork
Parallel channels, regression trend and pitchforks.
Positions
Long and short positions with risk / reward and P&L.
Price labels & lines
Price labels and draggable target / stop lines.
Datafeed
In-memory datafeed
Daily bars aggregated to weekly and monthly on demand.
Realtime candles
A ticking feed that loads history as you scroll back.
Bar replay
Reveal the data bar by bar.
CSV data
Parse a CSV export bundled with the app.
TradingChart widget
TradingChart
The full trading chart UI in one component.
Minimal UI
Switch off any part of the interface.
Multi-chart layouts
Several synced charts in one widget.
Saving state
Serialize and restore the whole layout.
Custom indicator
Add your own indicator to the indicators dialog.
Your own data
Pass an array of bars instead of a datafeed.
Chart type switcher
The widget's chart types in a plain chart with MainSeries.
Advanced
Analytics dashboard
A responsive 2×2 grid of synced charts: one crosshair, one zoom.
Synced crosshair grid
Four symbols in a grid with a shared crosshair and range.
Multi-pane trading chart
Candles, moving averages, Bollinger Bands, volume, RSI and MACD.
Realtime streaming
Server metrics appended four times a second.
Large datasets
Up to 200,000 points with smooth pan and zoom.
Resizable panes
Price, volume, RSI and MACD panes sharing one x axis.
Interactivity
Tooltip
A shared tooltip card that follows the pointer.
Custom tooltip
A custom header and a computed row around the default card.
Crosshair modes
Free, magnet and hidden crosshairs.
Legend
Values at the crosshair; click an item to hide its series.
Toggle series
Stacked, grouped or overlaid bars with a legend that adds and removes series.
Legend actions
Show / hide buttons rendered after each legend item.
Compact legend
A legend that collapses into chips on small charts.
Custom legend
Your own legend markup from useLegend.
Zoom & brush
Zoom buttons and a brush to select a range.
Events
Pointer events in chart coordinates.
Draggable line
A goal line users drag, built with useHitTarget.
Synced charts
Two charts with a shared crosshair, pan and zoom.
Drawing tools
Drawing toolbar
Lines, freehand strokes, shapes, text and measurements on a line chart, with the style editor.
Lines
Trend lines, rays, info lines, arrows and horizontal / vertical lines.
Freehand
Brush and highlighter strokes drawn by dragging on the chart.
Shapes
Rectangles, ellipses, triangles and paths with fills.
Text & callouts
Editable text labels and callouts pointing at a value.
Measure
Date ranges, value ranges and both at once on a traffic chart.
Alerts
Threshold lines that fire when a live sensor reading crosses them.
Saving drawings
Controlled drawings stored in React state, with save, load, undo and redo.
Custom drawing tool
A new drawing tool built with defineTool.
Customization
Custom theme
A terminal-style theme built with createTheme.
Annotated line chart
A highlighted period, a goal line, text markers and a callout.
Reference lines & areas
Thresholds, incidents and a labelled peak.
Price lines
Labelled horizontal lines, last values and current coordinates.
Axes & grid
Axis placement, tick formats and grid styles.
Straight lines
Horizontal and vertical lines at fixed values.
Custom series
Your own canvas drawing with useRenderable.
Custom series with useSeries
A lollipop series with autoscale, legend and tooltip for free.