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.

import { SparklineChart } from 'reaviz';


export default function App() {
  const data = [
    {
      id: '50',
      key: new Date('2020-01-13T08:00:00.000Z'),
      data: 16
    },
    {
      id: '49',
      key: new Date('2020-01-14T08:00:00.000Z'),
      data: 44
    },
    {
      id: '48',
      key: new Date('2020-01-15T08:00:00.000Z'),
      data: 12
    },
    {
      id: '47',
      key: new Date('2020-01-16T08:00:00.000Z'),
      data: 26
    },
    {
      id: '46',
      key: new Date('2020-01-17T08:00:00.000Z'),
      data: 41
    }
  ];


  return (
    <SparklineChart
      height={200}
      width={300}
      data={data}
    />
  );
}

import { SparklineChart } from 'reaviz';

export default function App() {
  const data = [
    {
      id: '50',
      key: new Date('2020-01-13T08:00:00.000Z'),
      data: 16
    },
    {
      id: '49',
      key: new Date('2020-01-14T08:00:00.000Z'),
      data: 44
    },
    {
      id: '48',
      key: new Date('2020-01-15T08:00:00.000Z'),
      data: 12
    },
    {
      id: '47',
      key: new Date('2020-01-16T08:00:00.000Z'),
      data: 26
    },
    {
      id: '46',
      key: new Date('2020-01-17T08:00:00.000Z'),
      data: 41
    }
  ];

  return (
    <SparklineChart
      height={200}
      width={300}
      data={data}
    />
  );
}

Examples

Line

Area

Bar

Sonar

API

Sparkline Chart (opens in a new tab)

Prop	Description	Default
`data`	Data the chart will receive to render. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[]`
`series`	The 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} />} /> )`
`yAxis`	The 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} />} /> )`
`xAxis`	The 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} />} /> )`
`gridlines`	The chart's background gridlines component. `ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>>`	`null`
`brush`	The chart's brush component. `ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>>`
`zoomPan`	The chart's zoom pan component. `ReactElement<ChartZoomPanProps, FC<Partial<ChartZoomPanProps>>>`
`secondaryAxis`	Any secondary axis components. Useful for multi-axis charts. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]`
`id`	Id of the chart. `string`
`width`	Width of the chart. If not provided will autosize. `number`
`height`	Height of the chart. If not provided will autosize. `number`
`margins`	Margins for the chart. `Margins`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

Sonar Chart (opens in a new tab)

Prop	Description	Default
`data`	Data the chart will receive to render. `ChartNestedDataShape[]`
`series`	The series component that renders the bar components. `ReactElement<BarSeriesProps, FC<Partial<BarSeriesProps>>>`
`yAxis`	The linear axis component for the Y Axis of the chart. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>`
`xAxis`	The linear axis component for the X Axis of the chart. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>`
`gridlines`	The chart's background gridlines component. `ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>>`
`brush`	The chart's brush component. `ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>>`
`secondaryAxis`	Any secondary axis components. Useful for multi-axis charts. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]`
`id`	Id of the chart. `string`
`width`	Width of the chart. If not provided will autosize. `number`
`height`	Height of the chart. If not provided will autosize. `number`
`margins`	Margins for the chart. `Margins`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

BarSparkline Chart (opens in a new tab)

Prop	Description	Default
`data`	Data the chart will receive to render. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[]`
`series`	The series component that renders the bar components. `ReactElement<BarSeriesProps, FC<Partial<BarSeriesProps>>>`	`<BarSeries colorScheme={schemes.cybertron[0]} />`
`yAxis`	The 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} />} /> )`
`xAxis`	The 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} />} /> )`
`gridlines`	The chart's background gridlines component. `ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>>`	`null`
`brush`	The chart's brush component. `ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>>`
`secondaryAxis`	Any secondary axis components. Useful for multi-axis charts. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]`
`id`	Id of the chart. `string`
`width`	Width of the chart. If not provided will autosize. `number`
`height`	Height of the chart. If not provided will autosize. `number`
`margins`	Margins for the chart. `Margins`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

AreaSparkline Chart (opens in a new tab)

Prop	Description	Default
`data`	Data the chart will receive to render. `ChartShallowDataShape<ChartDataTypes \| [ChartDataTypes, ChartDataTypes]>[]`
`series`	The 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} />} /> )`
`yAxis`	The 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} />} /> )`
`xAxis`	The 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} />} /> )`
`gridlines`	The chart's background gridlines component. `ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>>`	`null`
`brush`	The chart's brush component. `ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>>`
`zoomPan`	The chart's zoom pan component. `ReactElement<ChartZoomPanProps, FC<Partial<ChartZoomPanProps>>>`
`secondaryAxis`	Any secondary axis components. Useful for multi-axis charts. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]`
`id`	Id of the chart. `string`
`width`	Width of the chart. If not provided will autosize. `number`
`height`	Height of the chart. If not provided will autosize. `number`
`margins`	Margins for the chart. `Margins`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

Sunburst Chart 🆕Tree Map