Docs
๐Ÿ“Š โ Charts
Sparkline

Sparkline

A Sparkline in REAVIZ is a small, condensed, and simplified line chart that provides a snapshot of data trends within a compact space, without axes or labels. It is designed for quick and immediate comprehension of data trends, making it ideal for presenting patterns and changes at a glance within limited space.

Types supported in reaviz:

  • Line - Displays data trends as a simple line.
  • Area - Similar to a line sparkline but with the area under the line filled.
  • Bar - Displays data trends as a series of bars.
  • Sonar - A unique representation often used for tracking and sonar-like visualizations.

Where to use:

  • Concise Data Visualization: Ideal for displaying data trends in a compact space.
  • Quick Trend Comprehension: Useful for providing immediate insight into data trends without specific data points or labels.
  • Minimalist Design: Great for incorporating into text, tables, or dashboards where space is limited.

Quick Start

To create a Sparkline, import the chart of your choice SparklineChart, AreaSparklineChart, BarSparklineChart or SonarChart and provide th data. The chart will automatically configure itself with the default options exposed via props.

Examples

Line

Area

Bar

Sonar

API

Sparkline Chart (opens in a new tab)

PropDescriptionDefault
dataData the chart will receive to render.
ChartShallowDataShape<ChartDataTypes | [ChartDataTypes, ChartDataTypes]>[]
seriesThe series component that renders the area/line/circles components.
ReactElement<AreaSeriesProps, FC<Partial<AreaSeriesProps>>>
( <AreaSeries symbols={<PointSeries show="hover" />} interpolation="smooth" markLine={null} area={null} line={<Line strokeWidth={2} />} /> )
yAxisThe linear axis component for the Y Axis of the chart.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>
( <LinearYAxis scaled={true} type="value" axisLine={null} tickSeries={<LinearYAxisTickSeries line={null} label={null} />} /> )
xAxisThe linear axis component for the X Axis of the chart.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>
( <LinearXAxis type="time" scaled={true} axisLine={null} tickSeries={<LinearXAxisTickSeries line={null} label={null} />} /> )
gridlinesThe chart's background gridlines component.
ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>>
null
brushThe chart's brush component.
ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>>
zoomPanThe chart's zoom pan component.
ReactElement<ChartZoomPanProps, FC<Partial<ChartZoomPanProps>>>
secondaryAxisAny secondary axis components. Useful for multi-axis charts.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]
idId of the chart.
string
widthWidth of the chart. If not provided will autosize.
number
heightHeight of the chart. If not provided will autosize.
number
marginsMargins for the chart.
Margins
classNameClassnames for the chart.
string
containerClassNameClassnames for the chart.
string
styleAdditional css styles.
StyleHTMLAttributes<SVGSVGElement>
centerCenter the chart. Used mainly internally.
boolean
centerXCenter chart on X Axis only. Used mainly internally.
boolean
centerYCenter chart on Y Axis only. Used mainly internally.
boolean

Sonar Chart (opens in a new tab)

PropDescriptionDefault
dataData the chart will receive to render.
ChartNestedDataShape[]
seriesThe series component that renders the bar components.
ReactElement<BarSeriesProps, FC<Partial<BarSeriesProps>>>
yAxisThe linear axis component for the Y Axis of the chart.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>
xAxisThe linear axis component for the X Axis of the chart.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>
gridlinesThe chart's background gridlines component.
ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>>
brushThe chart's brush component.
ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>>
secondaryAxisAny secondary axis components. Useful for multi-axis charts.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]
idId of the chart.
string
widthWidth of the chart. If not provided will autosize.
number
heightHeight of the chart. If not provided will autosize.
number
marginsMargins for the chart.
Margins
classNameClassnames for the chart.
string
containerClassNameClassnames for the chart.
string
styleAdditional css styles.
StyleHTMLAttributes<SVGSVGElement>
centerCenter the chart. Used mainly internally.
boolean
centerXCenter chart on X Axis only. Used mainly internally.
boolean
centerYCenter chart on Y Axis only. Used mainly internally.
boolean

BarSparkline Chart (opens in a new tab)

PropDescriptionDefault
dataData the chart will receive to render.
ChartShallowDataShape<ChartDataTypes | [ChartDataTypes, ChartDataTypes]>[]
seriesThe series component that renders the bar components.
ReactElement<BarSeriesProps, FC<Partial<BarSeriesProps>>>
<BarSeries colorScheme={schemes.cybertron[0]} />
yAxisThe linear axis component for the Y Axis of the chart.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>
( <LinearYAxis type="value" axisLine={null} tickSeries={<LinearYAxisTickSeries line={null} label={null} />} /> )
xAxisThe linear axis component for the X Axis of the chart.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>
( <LinearXAxis type="category" axisLine={null} tickSeries={<LinearXAxisTickSeries line={null} label={null} />} /> )
gridlinesThe chart's background gridlines component.
ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>>
null
brushThe chart's brush component.
ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>>
secondaryAxisAny secondary axis components. Useful for multi-axis charts.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]
idId of the chart.
string
widthWidth of the chart. If not provided will autosize.
number
heightHeight of the chart. If not provided will autosize.
number
marginsMargins for the chart.
Margins
classNameClassnames for the chart.
string
containerClassNameClassnames for the chart.
string
styleAdditional css styles.
StyleHTMLAttributes<SVGSVGElement>
centerCenter the chart. Used mainly internally.
boolean
centerXCenter chart on X Axis only. Used mainly internally.
boolean
centerYCenter chart on Y Axis only. Used mainly internally.
boolean

AreaSparkline Chart (opens in a new tab)

PropDescriptionDefault
dataData the chart will receive to render.
ChartShallowDataShape<ChartDataTypes | [ChartDataTypes, ChartDataTypes]>[]
seriesThe series component that renders the area/line/circles components.
ReactElement<AreaSeriesProps, FC<Partial<AreaSeriesProps>>>
( <AreaSeries symbols={<PointSeries show="hover" />} interpolation="smooth" markLine={null} area={ <Area mask={<Stripes />} gradient={ <Gradient stops={[ <GradientStop offset="10%" stopOpacity={0} key="start" />, <GradientStop offset="80%" stopOpacity={1} key="stop" /> ]} /> } /> } line={<Line strokeWidth={3} />} /> )
yAxisThe linear axis component for the Y Axis of the chart.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>
( <LinearYAxis type="value" scaled={true} axisLine={null} tickSeries={<LinearYAxisTickSeries line={null} label={null} />} /> )
xAxisThe linear axis component for the X Axis of the chart.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>
( <LinearXAxis type="time" scaled={true} axisLine={null} tickSeries={<LinearXAxisTickSeries line={null} label={null} />} /> )
gridlinesThe chart's background gridlines component.
ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>>
null
brushThe chart's brush component.
ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>>
zoomPanThe chart's zoom pan component.
ReactElement<ChartZoomPanProps, FC<Partial<ChartZoomPanProps>>>
secondaryAxisAny secondary axis components. Useful for multi-axis charts.
ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]
idId of the chart.
string
widthWidth of the chart. If not provided will autosize.
number
heightHeight of the chart. If not provided will autosize.
number
marginsMargins for the chart.
Margins
classNameClassnames for the chart.
string
containerClassNameClassnames for the chart.
string
styleAdditional css styles.
StyleHTMLAttributes<SVGSVGElement>
centerCenter the chart. Used mainly internally.
boolean
centerXCenter chart on X Axis only. Used mainly internally.
boolean
centerYCenter chart on Y Axis only. Used mainly internally.
boolean