Area Chart
Line chart with the area between x-axis and line is emphasized with color. Inspired by Tremor.
Installation
npx @rahimstack@latest add chartsAPI Reference
AreaChart
| Prop | Type | Default |
|---|---|---|
data * | any[] | null | undefined | |
categories * | string[] | |
index * | string | |
colors | ChartColor[] | |
valueFormatter | ChartValueFormatter | |
startEndOnly | boolean | false |
showXAxis | boolean | true |
showYAxis | boolean | true |
yAxisWidth | number | 56 |
showAnimation | boolean | true |
showTooltip | boolean | true |
showLegend | boolean | true |
showGridLines | boolean | true |
autoMinValue | boolean | false |
minValue | number | |
maxValue | number | |
allowDecimals | boolean | true |
emptyDisplay | React.ReactElement | `<></>` |
React.ComponentPropsWithoutRef<"div"> | ||
showGradient | boolean | true |
stack | boolean | false |
curveType | ChartCurveType | "linear" |
connectNulls | boolean | false |
showDots | boolean | true |
angledLabels | boolean | false |
intervalType | "preserveStart" | "preserveEnd" | "preserveStartEnd" | "equidistantPreserveStart" | "preserveStartEnd" |
No styles