vue-charts Charts
Chart Containers
Props shared by AreaChart, BarChart, LineChart, ComposedChart, ScatterChart, PieChart, RadarChart, RadialBarChart and FunnelChart
A chart container (<BarChart>, <PieChart>, …) holds the data, the size and the layout, and
renders its series, axes, tooltip and legend from the default slot. The tables below list the
container props once. Each chart page lists only what is specific to that chart.
Common props
All nine containers accept these props.
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array | [] | Rows shared by all series |
width / height / aspect | number | fills the parent | Size. See Chart size |
initial-dimension | { width, height } | { width: 640, height: 360 } | Size before the first measurement. See Chart size |
margin | { top, right, bottom, left } | { top: 5, right: 5, bottom: 5, left: 5 } | Space between the chart edge and the plot area |
layout | 'horizontal' | 'vertical' | 'horizontal' | Direction of the category axis. Polar charts set their own layout |
stack-offset | 'none' | 'expand' | 'positive' | 'sign' | 'silhouette' | 'wiggle' | 'none' | How stacked series are offset; expand gives 100 % stacks; use sign when stacked values can be negative |
reverse-stack-order | boolean | false | Put the last stacked series at the base |
sync-id | string | number | — | Charts with the same id share the tooltip and the Brush range |
sync-method | 'index' | 'value' | function | 'index' | How a synced chart finds the active point: by row index, by category value, or with your function |
is-animation-active | boolean | true | Default animation setting for all series |
transition | ChartTransition | motion tokens | Default timing for all series |
title | string | the chart type, for example 'Bar chart' | Accessible name |
desc | string | — | Accessible description |
accessibility-layer | boolean | true | Keyboard navigation and screen-reader support |
tab-index | number | 0 | Tab order of the chart, with the accessibility layer |
role | string | 'application', or 'img' without the accessibility layer | ARIA role of the chart |
id | string | generated | Stable id for the chart's SVG ids |
compact | boolean | false | Render only the SVG, without the wrapper and the HTML tooltip and legend |
class, style | — | Set on the chart wrapper |
Chart pointer events (@click, @mousemove, …) are listed in
Events and v-model.
Bar sizing
AreaChart, BarChart, LineChart, ComposedChart, ScatterChart and RadialBarChart
also accept these props. A barSize or maxBarSize on a series overrides them.
| Prop | Type | Default | Description |
|---|---|---|---|
bar-category-gap | number | string | '10%' | Space between categories, in px or percent of the category width |
bar-gap | number | string | 4 | Space between bars of one category: px, or 'N%' of the category width |
bar-size | number | string | — | Width of every bar; without it, bars share the category width |
max-bar-size | number | — | Upper limit of the bar width |
Polar props
PieChart, RadarChart and RadialBarChart also accept these props. Percent strings are
relative to the plot area.
| Prop | Type | Default | Description |
|---|---|---|---|
cx, cy | number | string | '50%' | Center of the chart |
inner-radius | number | string | 0 | Inner radius |
outer-radius | number | string | '80%' | Outer radius |
start-angle | number | 0 (Pie, RadialBar), 90 (Radar) | Start angle in degrees |
end-angle | number | 360 (Pie, RadialBar), -270 (Radar) | End angle in degrees |
Synchronized charts
Give two charts the same sync-id. Hovering one chart moves the tooltip in the other.
<template>
<LineChart
:data="data"
:height="150"
sync-id="week"
>
<Line data-key="visits" />
<Tooltip />
</LineChart>
<AreaChart
:data="data"
:height="150"
sync-id="week"
>
<Area data-key="signups" />
<Tooltip />
</AreaChart>
</template>