Show / hide anything
Every part of a chart is a switch. Strip it down to a sparkline or dress it up with a full legend, axes and brush.
Axes & grid
| Prop | Type | Default |
|---|---|---|
| showXAxis Category labels. | boolean | true |
| showYAxis Value ticks. | boolean | false |
| yAxisPosition Which side. | "left" | "right" | "left" |
| yTickCount Tick density. | number | 4 |
| showGrid Horizontal lines. | boolean | true |
| gridVertical Vertical lines. | boolean | false |
| gridStyle Line style. | "solid" | "dashed" | "solid" |
Legend
| Prop | Type | Default |
|---|---|---|
| showLegend Show it. | boolean | false |
| legendVariant square · circle · circle-outline · rounded-square · rounded-square-outline · vertical-bar · horizontal-bar | 7 markers | "rounded-square" |
| legendPosition Placement. | "top" | "bottom" | "bottom" |
| legendAlign Alignment. | "left" | "center" | "right" | "center" |
| legendMode Hide series, highlight one, or static. | "toggle" | "select" | "none" | "toggle" |
Tooltip & labels
| Prop | Type | Default |
|---|---|---|
| showTooltip Tooltip on scrub / tap. | boolean | true |
| tooltipVariant Surface. | "default" | "frosted-glass" | "default" |
| tooltipRoundness Corners. | sm · md · lg · xl | "lg" |
| tooltipIndicator Row marker. | dot · line · dashed | "dot" |
| hideTooltipIndicator / hideTooltipLabel Trim it down. | boolean | false |
| showTooltipTotal Total row. | boolean | false |
| showLabels Value labels on the chart. | boolean | false |
Minimal vs maximal
Minimal
<LineSeriesChart data={data} config={config} xKey="month" showGrid={false} showXAxis={false} showTooltip={false} showDots={false} height={60}/>Maximal
<AreaSeriesChart data={data} config={config} xKey="date" showYAxis yAxisPosition="right" gridVertical gridStyle="dashed" showLegend legendPosition="top" legendVariant="circle-outline" legendMode="select" tooltipVariant="frosted-glass" showTooltipTotal showBrush backgroundVariant="dots"/>Try every switch live in the playground app's Customize sheet — it drives all charts at once.
Did you like the content?