shadcn.io is an independent project built on shadcn/ui

Free

Composed chart

Bars, lines, areas and candles on one time axis, such as units next to revenue. Any series can take its own y scale, with or without an axis.

TanStack Charts

PreviewCode

Installation

The command adds the example above to components/charts/ and, the first time, the chart kit to components/ui/charts/. Both are source files in your project from then on: read them, change them, delete what you don't use.

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

Each row has a Date under date and a number for every series, whatever it's drawn as. Revenue and units don't share a range, so the line gets its own yAxisId, a second scale with no axis.

<script setup lang="ts">
import {
  ChartTooltip,
  ComposedChart,
  Grid,
  Line,
  SeriesBar,
  XAxis,
} from "@/components/ui/charts";

const data = [
  { date: new Date(2026, 9, 1), revenue: 42, units: 310 },
  { date: new Date(2026, 9, 2), revenue: 47, units: 345 },
  { date: new Date(2026, 9, 3), revenue: 39, units: 290 },
  { date: new Date(2026, 9, 4), revenue: 53, units: 402 },
  { date: new Date(2026, 9, 5), revenue: 51, units: 386 },
];
</script>

<template>
  <ComposedChart ariaLabel="Units and revenue" :data="data" :max-bar-size="32">
    <Grid horizontal />
    <SeriesBar
      data-key="units"
      fill="var(--chart-3)"
      label="Units"
      :radius="4"
    />
    <Line
      data-key="revenue"
      label="Revenue"
      stroke="var(--chart-1)"
      y-axis-id="revenue"
    />
    <XAxis />
    <ChartTooltip />
  </ComposedChart>
</template>

Anatomy

Every series reads its own dataKey from the same rows. Children draw in the order you write them: an area first, then the bars, then the line on top.

<ComposedChart :data="data">
  <Grid horizontal />
  <Area data-key="runRate" fill="var(--chart-4)" />
  <SeriesBar data-key="units" fill="var(--chart-3)" :radius="4" />
  <Line data-key="revenue" stroke="var(--chart-1)" />
  <XAxis />
  <YAxis />
  <ChartTooltip />
</ComposedChart>

ComposedChart: Holds the rows and the date axis, and gives each row a slot for its bars.
Grid: Guide lines behind everything.
Area: A filled series, usually written first so it sits at the back.
SeriesBar: Bars for one series, grouped with the other SeriesBars or stacked.
Line: A line over the bars.
XAxis: Date labels along the bottom.
YAxis: Labels for one scale. A scale without a YAxis is still drawn, just unlabeled.
ChartTooltip: The crosshair, a dot per series and the panel.

Grouped and stacked bars

Two or more SeriesBars sit side by side in each slot, barGap pixels apart (4 by default). Add stacked to the chart to stack them in the order you wrote them, and stackGap for a gap between segments.

maxBarSize caps the width so a short date range doesn't produce slabs.

PreviewCode

Separate scales

Every series takes a yAxisId. An id with no matching YAxis is a hidden scale, which is how unit bars and a revenue line can share the plot without a second row of labels.

yDomains sets each scale's range, as a fixed [min, max] or a function that adjusts the automatic one. { left: ([, max]) => [0, max * 3] } keeps the bars in the bottom third. Define the object outside the component so it isn't rebuilt on every render.

PreviewCode

Price and volume

A Candlestick inside a composed chart draws on the scale its yAxisId names, and that scale fits the wicks instead of starting at zero. Put the volume bars on another hidden scale underneath, and widthRatio sets how much of each slot a candle takes (0.6).

PreviewCode

Ranges and trends

<Band lowerKey="low" upperKey="high" /> shades the range between two fields of each row, such as a forecast's low and high. Write it before the Line so the line stays on top.

<TrendLine dataKey="revenue" /> fits a least-squares line to a series. Give it strokeDasharray or fadeEdges to set it apart from the data.

PreviewCode

Points under a line

Scatter draws one dot per row. Faint dots under a bold rolling average show both the daily noise and the trend through it.

PreviewCode

Profit and loss

ProfitLossLine changes color where it crosses zero, --chart-positive above and --chart-negative below, or your own positiveColor and negativeColor.

PreviewCode

Customization

The kit is in your project, in components/ui/charts/: your framework's components over a shared core/. Change a default there and every chart picks it up.

class goes on the chart's container, so size and spacing are utility classes.

A composed chart usually mixes units, so the default rows, one raw number per series, rarely read right. Pass rows to ChartTooltip to label and format each value yourself.

Candlestick, Scatter, ProfitLossLine, Band and TrendLine work as children too, alongside the overlays from the line chart such as Weekends and Deadline.

<ChartTooltip
  :rows="(point) => [
    { color: 'var(--chart-3)', label: 'Units', value: Number(point.units) },
    { color: 'var(--chart-1)', label: 'Revenue', value: `$${point.revenue}k` },
  ]"
/>

Where a part renders content of its own, you pass it in. In Vue:

ChartTooltip: <template #content="{ point, index }">

Loading state

The composed chart has no loading state of its own. While the rows load, render <BarChartLoading /> or <LineChartLoading />, whichever matches the main series, with the same aspectRatio so nothing shifts when the chart arrives.

Animation

Lines and areas are revealed from left to right over animationDuration (1100 ms). Bars grow from the baseline one after another, their start times spread over 40% of it.

Set :animate="false" on a SeriesBar to draw it at full height from the first frame, and change revealSignature to replay the entrance. Reduced motion skips it.

Theming

Every color in the kit is one of your theme's tokens or a mix of them, except --chart-positive, a fixed green. A preset or the .dark class restyles the chart, and overriding a token in your CSS changes it everywhere.

Each series takes its own color: fill on a SeriesBar or an Area, stroke on a Line. When a bar's fill is a gradient or a translucent mix, set stroke too and the tooltip dot uses it.

Token	Default	Paints
`--chart-1`	your theme's	the first series
`--chart-3`	your theme's	the third series
`--chart-4`	your theme's	the fourth series
`--chart-line-primary`	`--chart-1`	a series with no color of its own
`--chart-grid`	`--border`	grid lines
`--chart-label`	`--muted-foreground`	tick labels
`--chart-crosshair`	`--muted-foreground` at 75%	the hover line
`--chart-tooltip-background`	`--popover`	the tooltip panel
`--chart-positive`	a fixed green	values above the baseline in profit and loss
`--chart-negative`	`--destructive`	values below the baseline in profit and loss

globals.css

:root {
  --chart-line-primary: var(--chart-3);
  --chart-grid: var(--muted);
}

Accessibility

The chart is announced as an image named by ariaLabel ("Composed chart" by default). Mixed series are hard to picture from a name alone, so say how they relate in ariaDescription.

Tab: Moves focus to the chart.
Arrow Right: Moves to the next row. ArrowDown does the same.
Arrow Left: Moves to the previous row. ArrowUp does the same.
Home: Jumps to the first row.
End: Jumps to the last row.

API reference

Vue takes the same props as React, in camelCase or kebab-case, with class for className. Render props are scoped slots (#content), and callbacks such as onHoverChange can be written as listeners (@hover-change).

ComposedChart

PropType

dataChartDatum[]

The rows to plot. Each row holds the x value under xDataKey and one number per series under that series' dataKey.

xDataKey?string

Key of the x value in each row. The value must be a Date (or something new Date() accepts).

Default: "date"

animationDuration?number

Duration of the entrance in milliseconds. enterTransition.duration overrides it.

Default: 1100

margin?Partial<ChartMargin>

Space around the plot area in pixels. Missing sides use the default.

Type: Partial<ChartMargin>
Default: { top: 40, right: 40, bottom: 40, left: 40 }

aspectRatio?string

CSS aspect ratio of the chart, as "width / height".

Default: "2 / 1"

class?string

Extra CSS class name for the chart container.

onPhaseChange?(phase: ChartPhase) => void

Called with "ready" when the chart mounts.

Type: (phase: ChartPhase) => void

barSize?number

Target SeriesBar width in px. When unset, bars size to the available space.

maxBarSize?number

Maximum SeriesBar width in px.

barGap?number

Gap between the grouped SeriesBar columns in px.

Default: 4

stacked?boolean

Stack the SeriesBar segments in child order instead of grouping them.

Default: false

yDomains?Readonly<Record<string, YDomainOverride>>

Per-axis y-domain overrides, keyed by yAxisId ("left" for the default axis): a fixed [min, max], or a function of the auto domain (before it is niced) that returns the one to use, e.g. { left: ([, max]) => [0, max * 3] }. Define the object outside the component so it keeps its identity.

Type: Readonly<Record<string, YDomainOverride>>

barEdgeInset?boolean

With a SeriesBar or a Candlestick, inset the x axis by half a slot on each side so the first and last bars clear the plot edges; lines and areas share the inset scale. false draws edge to edge.

Default: true

stackGap?number

Vertical gap between stacked segments in px.

Default: 0

enterTransition?EnterTransition

Overrides the entrance duration (duration is in seconds, as in bklit-ui). Springs are treated as the default tween.

revealSignature?string

Changing this string replays the entrance animation.

childrenReactNode

The layers to draw: SeriesBar, Line, Area, Scatter, Candlestick, ProfitLossLine, Grid, XAxis, YAxis, ChartTooltip and the other chart children.

ariaLabel?string

Accessible name of the chart.

Default: "Composed chart"

ariaDescription?string

Longer accessible description of the chart, exposed as aria-description.

SeriesBar

PropType

dataKeystring

Key of the data field that holds the bar heights.

label?string

Name of the series in the default tooltip row. Defaults to dataKey.

yAxisId?string | number

Id of the y scale the bars stand on. An id without a YAxis is a hidden scale, handy for volume bars under a price. Stacked bars stack with the bars of their axis.

Type: string | number
Default: "left"

fill?string

Fill color of the bars.

Default: "var(--chart-line-primary)"

stroke?string

Color of the tooltip dot, for when fill is a gradient or pattern. Defaults to fill.

radius?number

Corner radius of the bars in px.

Default: 0

animate?boolean

Grow the bars from the baseline on entrance.

Default: true

fadedOpacity?number

Opacity of the bars that are not hovered while another x position is focused.

Default: 0.3

Line

PropType

dataKeystring

Key of the data field that holds this line's y values.

label?string

Name of the series in the default tooltip row and the chart context's \lines\ (what a legend built from them reads). Defaults to \dataKey\.

stroke?string

Stroke color of the line.

Default: "var(--chart-line-primary)"

strokeWidth?number

Stroke width of the line in px.

Default: 2.5

curve?CurveFactory

d3-shape curve factory used to interpolate between points.

Default: curveNatural

yAxisId?string | number

Id of the y scale this line is plotted against. Use it with a matching YAxis to give a series its own scale.

Type: string | number
Default: "left"

fadeEdges?FadeEdges

Fade the line toward transparent at the chart edges. true fades both ends, "left" or "right" fades one side, false turns the fade off, and { left, right } sets each side's fade zone as a percentage of the plot width (0-50).

Default: true

strokeGradient?StrokeGradient

A colour ramp across the plot, left to right: plain colours are spaced evenly, { offset, color } stops (offset 0-1) place them. It composes with fadeEdges and replaces stroke for the line's paint (stroke still colours the markers and the tooltip dot).

glow?boolean | Readonly<LineGlow>

A soft outer glow: a blurred copy of the stroke behind the line. true uses the defaults; { blur, opacity, strokeWidth } tunes it.

Type: boolean | Readonly<LineGlow>
Default: false

showHighlight?boolean

Draw a highlighted segment of the line around the hovered point.

Default: true

highlight?Readonly<LineHighlight>

The hover highlight's styling: colour or ramp, width, soft ends (fadeLength), glow, span and how far the rest of the line dims (dimOpacity). See LineHighlight.

Type: Readonly<LineHighlight>

showMarkers?boolean

Draw a circle marker at every data point.

Default: false

markers?Readonly<SeriesPointMarkerStyle>

Styling of the point markers drawn by showMarkers. See SeriesPointMarkerStyle.

Type: Readonly<SeriesPointMarkerStyle>

dashFromIndex?number

Data index from which the line is drawn dashed (inclusive). Useful for marking an incomplete or projected period.

dashArray?string

Dash pattern of the dashed tail when dashFromIndex is set.

Default: "6,4"

loadingStroke?string

Stroke color of the loading pulse overlay.

Default: "var(--chart-foreground)"

loadingStrokeOpacity?number

Stroke opacity of the loading pulse overlay.

Default: 0.5

animate?boolean

Whether the point markers animate in. The line itself always enters with the chart's animationDuration.

Default: true

loading?boolean

Show the loading pulse overlay on this line. When unset, the pulse follows the chart's status. Set false to disable it even while the chart is loading.

loadingPulseMode?LineLoadingPulseMode

Phase of the loading pulse: "loop" repeats, "exit" plays the loading to ready transition, "enter" plays ready to loading.

Default: "loop"

loadingStyle?LoadingStyle

Loading animation: a travelling "pulse" or a diagonal "sweep" shimmer across the skeleton line.

Default: "pulse"

onLoadingPulseCycleComplete?() => void

Called each time a "loop" pulse cycle completes.

Type: () => void

renderer?ChartMarkRenderer

Where the line draws: "svg", a path, or canvasRenderer, a bitmap the chart's canvas lines share, for tens of thousands of points (the grid, axes, hover highlight, markers, glow, crosshair and tooltip stay SVG). On a canvas the line dims with the others on hover (a legend can't dim it alone) and doesn't take a fadeEdges mask.

Default: "svg"

Area

PropType

dataKeystring

Key of the data field that holds this area's y values.

label?string

Name of the series in the default tooltip row and the chart context's \lines\ (what a legend built from them reads). Defaults to \dataKey\.

stroke?string

Color of the area's top line. Falls back to fill, then to the default line color.

Default: "var(--chart-line-primary)"

strokeWidth?number

Stroke width of the top line in px.

Default: 2

fill?string

Fill color of the area. Defaults to the resolved stroke.

fillOpacity?number

Opacity of the fill at the top of the area, before the gradient fades it toward gradientToOpacity.

Default: 0.4

curve?CurveFactory

d3-shape curve factory used to interpolate between points.

Default: curveMonotoneX

yAxisId?string | number

Id of the y scale this area is plotted against.

Type: string | number
Default: "left"

showLine?boolean

Draw the stroke line along the top of the area.

Default: true

gradientToOpacity?number

Fill opacity at the bottom of the vertical gradient.

Default: 0

gradientSpan?number

Vertical extent of the fill gradient (0 to 1): 1 fades across the area's full height, lower values reach gradientToOpacity sooner, nearer the top.

Default: 1

fadeBottom?number

Fade the fill out over the bottom N% of the area's height (0 to 100): 100 fades across the full height, 0 keeps the fill flat. Replaces gradientToOpacity and gradientSpan when set.

showValue?boolean

Show the value above sampled points, as text labels that share one count and one collision pass across every Area that shows them, stay inside the plot and skip what does not fit.

Default: false

valueLabelMinCount?number

Preferred minimum number of value labels per series; the room and collisions can lower it.

Default: 2

valueLabelMaxCount?number

Maximum number of value labels per series. 0 hides them all. Defaults to what the plot width allows.

valueLabelFormatter?(value: number) => string

Formats a value label. Defaults to an English integer such as 12,400.

Type: (value: number) => string

valueLabelColor?string

Color of the value labels. Defaults to the series stroke.

fadeValueLabels?boolean

Fade the value labels with the series' fadeEdges.

Default: false

fadeEdges?FadeEdges

Fade the area toward transparent at the chart edges. true fades both ends, "left" or "right" fades one side, and { left, right } sets each side's fade zone as a percentage of the plot width (0-50).

Default: false

showMarkers?boolean

Draw a circle marker at every data point.

Default: false

markers?Readonly<SeriesPointMarkerStyle>

Styling of the point markers drawn by showMarkers. See SeriesPointMarkerStyle.

Type: Readonly<SeriesPointMarkerStyle>

showHighlight?boolean

Draw a highlighted segment of the top line around the hovered point.

Default: true

dashFromIndex?number

Data index from which the top line is drawn dashed (inclusive).

dashArray?string

Dash pattern of the dashed tail when dashFromIndex is set.

Default: "6,4"

animate?boolean

Whether the point markers animate in. The area itself always enters with the chart's animationDuration.

Default: true

loading?boolean

Show the loading pulse overlay on this area. When unset, the pulse follows the chart's status. Set false to disable it.

loadingStroke?string

Stroke color of the loading pulse overlay.

Default: "var(--chart-foreground)"

loadingStrokeOpacity?number

Stroke opacity of the loading pulse overlay.

Default: 0.5

loadingPulseMode?LineLoadingPulseMode

Phase of the loading pulse: "loop" repeats, "exit" plays the loading to ready transition, "enter" plays ready to loading.

Default: "loop"

loadingStyle?LoadingStyle

Loading animation: a travelling "pulse" or a diagonal "sweep" shimmer.

Default: "pulse"

renderer?ChartMarkRenderer

Where the area's fill and line draw: "svg", paths, or canvasRenderer, a bitmap the chart's canvas series share, for tens of thousands of points (the grid, axes, hover highlight, markers, crosshair and tooltip stay SVG). On a canvas the area dims with the others on hover (a legend can't dim it alone) and its fill draws to the plot's edges (fadeEdges is an SVG mask).

Default: "svg"

Grid

PropType

horizontal?boolean

Show horizontal grid lines.

Default: true

vertical?boolean

Show vertical grid lines.

Default: false

numTicksRows?number

Number of horizontal grid lines. Ignored when rowTickValues is set.

Default: 5

numTicksColumns?number

Number of vertical grid lines.

Default: 10

rowTickValues?number[]

Explicit y values for the horizontal grid lines. Overrides numTicksRows.

stroke?string

Color of the grid lines.

Default: "var(--chart-grid)"

loadingStroke?string

Grid color while the chart is loading. Falls back to stroke.

strokeOpacity?number

Opacity of the grid lines.

Default: 1

strokeWidth?number

Width of the grid lines in px.

Default: 1

strokeDasharray?string

Dash pattern of the grid lines.

Default: "4,4"

highlightRowValues?number[]

Y values of horizontal lines drawn with the highlight styling, for example a zero baseline.

highlightRowStroke?string

Color of the highlighted rows.

Default: "var(--chart-foreground-muted)"

highlightRowStrokeOpacity?number

Opacity of the highlighted rows.

Default: 1

highlightRowStrokeWidth?number

Width of the highlighted rows in px.

Default: 1

highlightRowStrokeDasharray?string

Dash pattern of the highlighted rows.

Default: "0"

fadeHorizontal?boolean

Fade the horizontal lines toward transparent at the left and right edges.

Default: true

fadeVertical?boolean

Fade the vertical lines toward transparent at the top and bottom edges.

Default: false

hideHorizontalEdgeLines?boolean

Drop the first and last horizontal line (kept when two or fewer remain).

Default: false

hideVerticalEdgeLines?boolean

Drop the first and last vertical line (kept when two or fewer remain).

Default: false

shimmer?boolean

While the chart is loading, sweep a bright band across the grid.

Default: false

shimmerStroke?string

Color of the shimmer band.

Default: "color-mix(in oklch, var(--bkm-foreground) 68%, transparent)"

shimmerSpeed?number

Speed multiplier of the shimmer sweep. 2 is twice as fast.

Default: 1

XAxis

PropType

numTicks?number | ResponsiveChartLabelCount

Target number of tick labels along the x axis, or one per chart width: { base, sm, md, lg, xl } takes the count of the widest breakpoint the chart reaches (640, 768, 1024 and 1280 px).

Type: number | ResponsiveChartLabelCount
Default: 5

labels?readonly string[]

The tick text of each data row, in row order: it replaces the date formatting (pair it with ChartTooltip dateLabels).

tickerHalfWidth?number

Half-width in px of the zone around the date pill inside which tick labels are hidden. Line, area and composed charts widen it to the pill's half-width plus the widest tick label's, so no label sits half under the pill.

Default: 50

tickMode?"domain" | "data"

Where ticks fall: "data" places them on evenly spaced data rows, "domain" places them at evenly spaced time values across the x domain.

Type: "domain" | "data"
Default: "data"

formatValue?(value: Readonly<Date>) => string

Formats a tick date into its label. Defaults to a short month and day such as "Jan 5".

Type: (value: Readonly<Date>) => string

YAxis

PropType

yAxisId?string | number

Id of the y scale this axis labels. Must match the yAxisId of the series that use it.

Type: string | number
Default: "left"

orientation?"left" | "right"

Side of the plot the axis sits on. The primary axis is on the left; additional axes default to the right.

Type: "left" | "right"
Default: "left"

numTicks?number

Target number of tick labels. The primary axis also sets the number of horizontal grid lines.

Default: 5

formatLargeNumbers?boolean

Abbreviate values of 1000 and above as thousands, with one decimal where needed, for example 2k or 1.5k.

Default: true

formatValue?(value: number) => string

Formats a tick value into its label. Overrides formatLargeNumbers.

Type: (value: number) => string

ChartTooltip

PropType

showDatePill?boolean

Show the date pill that rides along the bottom of the plot.

Default: true

showCrosshair?boolean

Show the vertical crosshair line. Bar charts leave it off unless this is true (the dots and the category pill mark the bar).

Default: true

showDots?boolean

Show a dot on every series at the hovered position.

Default: true

dotVariant?"dot" | "ring"

Dot style: a filled "dot" or a transparent "ring" square. Read by BarChart only.

Type: "dot" | "ring"
Default: "dot"

dotSize?number

Dot radius in px.

Default: 5

dotRadiusFraction?number

Corner radius of the "ring" variant as a fraction of its side (0 is square, 0.5 is a circle). Read by BarChart only.

Default: 0.25

dotScale?number

Multiplier applied to the dot or ring size. Read by BarChart and LiveLineChart.

Default: 1

dotStrokeWidth?number

Stroke width of the dots in px.

Default: 2

indicatorColor?string | ((point: Record<string, unknown>) => string)

Color of the crosshair. Only a string is applied; the function form that bklit-ui accepts is ignored and the default is used.

Type: string | ((point: Record<string, unknown>) => string)
Default: "var(--chart-crosshair)"

#content?slot: { point, index }

Replaces the default tooltip panel body. Receives the hovered data row and its index; with pinnable, also whether the panel is pinned and a dismiss that unpins it (for a close button in a pinned panel's detail).

pinnable?boolean

A click (or Enter, or Space) on the chart pins the tooltip where it is: the panel takes the pointer, so its content can grow into detail and hold controls, until another click, Escape or dismiss lets it go.

Default: false

rows?(point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]

Replaces the default rows (one per series) with your own list of { color, label, value }.

Type: (point: Record<string, unknown>) => { readonly color: string; readonly label: string; readonly value: string | number }[]

dotColor?string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)

Fill of the tooltip dots. A function receives the hovered row and the series config, and is called again each time the hovered row changes. Defaults to each series' color; a ProfitLossLine's dot takes the color of the hovered value's sign.

Type: string | ((point: Record<string, unknown>, line: ChartLineConfig) => string)

#default?slot

Extra content rendered below the rows in the default panel, for example marker details. Without it, a chart with ChartMarkers lists the markers on the hovered date there.

class?string

Extra class name for the tooltip panel.

springConfig?SpringConfig

Spring for the floating panel when matchCrosshair is on. Defaults to the chart's tooltip spring.

matchCrosshair?boolean

Make the floating panel follow the pointer with the same spring as the crosshair instead of damping.

Default: false

damping?number

Spring damping for the floating panel when matchCrosshair is off, on bklit's 0 to 100 scale: lower is bouncier, higher slower, 0 moves the panel instantly. The default, 20, is the snappy hover spring (stiffness 3600, damping 120); every other value is bklit's spring for it played six times faster.

Default: 20

indicatorDasharray?string

Dash pattern of the crosshair. Omit for a solid line.

indicatorFadeEdges?IndicatorFadeEdges

Vertical fade of the crosshair: both ends, the top, the bottom, or none (solid).

Default: "both"

indicatorFadeLength?number

Size of the crosshair's fade, as a percentage of its height (2 to 40).

Default: 10

indicatorEndColor?string

Bottom colour of the crosshair: it ramps from indicatorColor at the top to this at the bottom (composes with the fade).

indicatorEnd?"plot" | "point"

How far down the crosshair reaches: the whole plot, or down to the hovered point of the first series.

Type: "plot" | "point"
Default: "plot"

dotHaloBlur?number

Blur in px on the dots' halo, for a soft glow.

Default: 0

topOffset?number

Extra gap in px between the top of the plot and the tooltip panel.

Default: 0

dateLabels?readonly string[]

The date pill's text for each data row, in row order (pair it with XAxis labels).

boxSpringConfig?SpringConfig

Spring for the floating panel. Takes priority over matchCrosshair and damping.

indicatorWidth?IndicatorWidth

Thickness of the crosshair: a width in px, or "line" (1px), "thin" (2px), "medium" (4px) or "thick" (8px).

Default: "line"

Examples

11 examples on Vue, each live with its code and its own install command.

All 11 composed chart examples

Explore UI

Popular

Frameworks

Built On

Explore Blocks

Marketing

Application

Explore Charts

Popular Examples

Frameworks

Explore Icons

More Libraries

Browse

Explore Templates

Categories

Community

Explore Design Systems

Categories

More

Explore Tools

Categories

Explore MCP

Set Up In

Help

Explore Pro

Resources

Legal

Preview

Installation

Usage

Anatomy

Grouped and stacked bars

Separate scales

Price and volume

Ranges and trends

Points under a line

Profit and loss

Customization

Loading state

Animation

Theming

Accessibility

API reference

ComposedChart

SeriesBar

Line

Area

Grid

XAxis

YAxis

ChartTooltip

Examples