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

Name	Type	Default
`data`	`ChartShallowDataShape[]` Data the chart will receive to render.	`[]`
`series`	`ReactElement<AreaSeriesProps, FC<Partial<AreaSeriesProps>>>` The series component that renders the area/line/circles components.	`<AreaSeries />`
`yAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the Y Axis of the chart.	`<LinearYAxis type="value" />`
`xAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the X Axis of the chart.	`<LinearXAxis type="time" />`
`gridlines`	`ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>> \| null` The chart’s background gridlines component.	`<GridlineSeries />`
`brush`	`ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>> \| null` The chart’s brush component.
`zoomPan`	`ReactElement<ChartZoomPanProps, FC<Partial<ChartZoomPanProps>>> \| null` The chart’s zoom pan component.
`secondaryAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]` Any secondary axis components. Useful for multi-axis charts.
`id`	`string` Id of the chart.
`width`	`number` Width of the chart. If not provided will autosize.
`height`	`number` Height of the chart. If not provided will autosize.
`margins`	`Margins` Margins for the chart.
`className`	`string` Classnames for the chart.
`containerClassName`	`string` Classnames for the chart.
`style`	`StyleHTMLAttributes<SVGSVGElement>` Additional css styles.
`center`	`boolean` Center the chart. Used mainly internally.
`centerX`	`boolean` Center chart on X Axis only. Used mainly internally.
`centerY`	`boolean` Center chart on Y Axis only. Used mainly internally.

Sonar Chart

Name	Type	Default
`data`	`ChartNestedDataShape[]` Data the chart will receive to render.	`[]`
`series`	`ReactElement<BarSeriesProps, FC<Partial<BarSeriesProps>>>` The series component that renders the bar components.	`<BarSeries />`
`yAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the Y Axis of the chart.	`<LinearYAxis type="value" />`
`xAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the X Axis of the chart.	`<LinearXAxis type="category" tickSeries={<LinearXAxisTickSeries tickSize={20} />} />`
`gridlines`	`ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>> \| null` The chart’s background gridlines component.	`<GridlineSeries />`
`brush`	`ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>> \| null` The chart’s brush component.
`secondaryAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]` Any secondary axis components. Useful for multi-axis charts.
`id`	`string` Id of the chart.
`width`	`number` Width of the chart. If not provided will autosize.
`height`	`number` Height of the chart. If not provided will autosize.
`margins`	`Margins` Margins for the chart.
`className`	`string` Classnames for the chart.
`containerClassName`	`string` Classnames for the chart.
`style`	`StyleHTMLAttributes<SVGSVGElement>` Additional css styles.
`center`	`boolean` Center the chart. Used mainly internally.
`centerX`	`boolean` Center chart on X Axis only. Used mainly internally.
`centerY`	`boolean` Center chart on Y Axis only. Used mainly internally.

BarSparkline Chart

Name	Type	Default
`data`	`ChartShallowDataShape[]` Data the chart will receive to render.	`[]`
`series`	`ReactElement<BarSeriesProps, FC<Partial<BarSeriesProps>>>` The series component that renders the bar components.	`<BarSeries />`
`yAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the Y Axis of the chart.	`<LinearYAxis type="value" />`
`xAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the X Axis of the chart.	`<LinearXAxis type="category" tickSeries={<LinearXAxisTickSeries tickSize={20} />} />`
`gridlines`	`ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>> \| null` The chart’s background gridlines component.	`<GridlineSeries />`
`brush`	`ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>> \| null` The chart’s brush component.
`secondaryAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]` Any secondary axis components. Useful for multi-axis charts.
`id`	`string` Id of the chart.
`width`	`number` Width of the chart. If not provided will autosize.
`height`	`number` Height of the chart. If not provided will autosize.
`margins`	`Margins` Margins for the chart.
`className`	`string` Classnames for the chart.
`containerClassName`	`string` Classnames for the chart.
`style`	`StyleHTMLAttributes<SVGSVGElement>` Additional css styles.
`center`	`boolean` Center the chart. Used mainly internally.
`centerX`	`boolean` Center chart on X Axis only. Used mainly internally.
`centerY`	`boolean` Center chart on Y Axis only. Used mainly internally.

AreaSparkline Chart

Name	Type	Default
`data`	`ChartShallowDataShape[]` Data the chart will receive to render.	`[]`
`series`	`ReactElement<AreaSeriesProps, FC<Partial<AreaSeriesProps>>>` The series component that renders the area/line/circles components.	`<AreaSeries />`
`yAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the Y Axis of the chart.	`<LinearYAxis type="value" />`
`xAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the X Axis of the chart.	`<LinearXAxis type="time" />`
`gridlines`	`ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>> \| null` The chart’s background gridlines component.	`<GridlineSeries />`
`brush`	`ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>> \| null` The chart’s brush component.
`zoomPan`	`ReactElement<ChartZoomPanProps, FC<Partial<ChartZoomPanProps>>> \| null` The chart’s zoom pan component.
`secondaryAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]` Any secondary axis components. Useful for multi-axis charts.
`id`	`string` Id of the chart.
`width`	`number` Width of the chart. If not provided will autosize.
`height`	`number` Height of the chart. If not provided will autosize.
`margins`	`Margins` Margins for the chart.
`className`	`string` Classnames for the chart.
`containerClassName`	`string` Classnames for the chart.
`style`	`StyleHTMLAttributes<SVGSVGElement>` Additional css styles.
`center`	`boolean` Center the chart. Used mainly internally.
`centerX`	`boolean` Center chart on X Axis only. Used mainly internally.
`centerY`	`boolean` Center chart on Y Axis only. Used mainly internally.