Chart
A bar, line, area, scatter, pie or donut chart. "data" is a list of objects. "xKey" is the field of the category. "series" are the value fields.
Examples
Loading examples…
Props
| Prop | Type | Description |
|---|---|---|
chartType | "bar" | "line" | "area" | "scatter" | "pie" | "donut" | Default "bar" |
data | object[] | A list of objects, or { "@path": "/x" } |
xKey | string | The field of the category axis |
series | string | object[] | The value fields: strings or { "key", "label"?, "color"? }. Default: every number field except xKey |
stacked | boolean | |
layout | "vertical" | "horizontal" | "horizontal" draws the bars from left to right. Default "vertical" |
yAxis | object | The value axis configuration object: {label?: string, min?: number, max?: number, width?: number}. Example: {label: "Revenue (USD)", min: 0, max: 100}. In horizontal charts, label, min and max apply to the horizontal value axis, and width sets the width of the category axis on the left. |
showDots | boolean | Point markers on a line or area |
barRadius | number | The corner radius of a bar, in pixels |
innerRadius | number | string | Pie and donut |
outerRadius | number | string | Pie and donut |
startAngle | number | Pie and donut. Default 90 |
endAngle | number | Pie and donut. Default -270 |
cornerRadius | number | The corners of a slice |
paddingAngle | number | The gap between slices |
showLabelLines | boolean | Leader lines of the slice labels. Default true |
height | number | Pixels. Default 240 |
showLegend | boolean | Default true |
showGrid | boolean | Default true |
showTooltip | boolean | Default true |
showValueLabels | boolean | |
format | "number" | "currency" | "percent" | Number formatting. With "percent", data values and axis min/max are fractions: 0.4 displays as 40%. For 0% to 10%, use min: 0 and max: 0.1. |
currency | string | ISO code. Default "USD" |
title | string |