Sparkline types in React Sparkline component

22 Jul 202624 minutes to read

Different shapes can be used to visualize data in a Sparkline component. You can change the Sparkline type using the type property.

The React Sparkline component supports the following types:

  • Line – Connects data points with a continuous line; ideal for trend visualization.
  • Column – Renders data as vertical bars; ideal for comparing discrete values.
  • WinLoss – Renders each data point as a positive or negative bar; ideal for win/loss or profit/loss data.
  • Pie – Renders data as proportional slices of a circle; ideal for composition.
  • Area – Renders a filled line chart; ideal for emphasizing magnitude over time. Here, the Area type is applied.
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SparklineComponent } from '@syncfusion/ej2-react-charts';

function App() {
    return (<SparklineComponent id='sparkline' height='100px' width='70%' dataSource={[
        { xval: '2005', yval: 20090440 },
        { xval: '2006', yval: 20264080 },
        { xval: '2007', yval: 20434180 },
        { xval: '2008', yval: 21007310 },
        { xval: '2009', yval: 21262640 },
        { xval: '2010', yval: 21515750 },
        { xval: '2011', yval: 21766710 },
        { xval: '2012', yval: 22015580 },
        { xval: '2013', yval: 22262500 },
        { xval: '2014', yval: 22507620 }
    ]} xName='xval' yName='yval' type='Area'>
    </SparklineComponent>);
}
export default App;
createRoot(document.getElementById('sparkline')).render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SparklineComponent } from '@syncfusion/ej2-react-charts';

function App() {
    return (<SparklineComponent id='sparkline' height='100px' width='70%' dataSource={[
        { xval: '2005', yval: 20090440 },
        { xval: '2006', yval: 20264080 },
        { xval: '2007', yval: 20434180 },
        { xval: '2008', yval: 21007310 },
        { xval: '2009', yval: 21262640 },
        { xval: '2010', yval: 21515750 },
        { xval: '2011', yval: 21766710 },
        { xval: '2012', yval: 22015580 },
        { xval: '2013', yval: 22262500 },
        { xval: '2014', yval: 22507620 }
    ]} xName='xval' yName='yval' type='Area'>
    </SparklineComponent>);
}
export default App;
createRoot(document.getElementById('sparkline')).render(<App />);

The following code sample shows different types of sparklines.

Line

The [Line] type is used to render the sparkline series as line.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
export class App extends React.Component {
    render() {
        return (<SparklineComponent id='sparkline' height='100px' width='70%' dataSource={[
                { x: 0, xval: '2005', yval: 20090440 },
                { x: 1, xval: '2006', yval: 20264080 },
                { x: 2, xval: '2007', yval: 20434180 },
                { x: 3, xval: '2008', yval: 21007310 },
                { x: 4, xval: '2009', yval: 21262640 },
                { x: 5, xval: '2010', yval: 21515750 },
                { x: 6, xval: '2011', yval: 21766710 },
                { x: 7, xval: '2012', yval: 22015580 },
                { x: 8, xval: '2013', yval: 22262500 },
                { x: 9, xval: '2014', yval: 22507620 },
            ]} 
        // Assign the dataSource values to series of sparkline 'xName and yName'
        xName='xval' yName='yval' 
        // Assign 'Line' as type of the sparkline
        type='Line'>
        </SparklineComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('sparkline'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';

function App() {

  return ( <SparklineComponent id='sparkline'
    height='100px' width='70%'
    dataSource= { [
        { x: 0, xval: '2005', yval: 20090440 },
        { x: 1, xval: '2006', yval: 20264080 },
        { x: 2, xval: '2007', yval: 20434180 },
        { x: 3, xval: '2008', yval: 21007310 },
        { x: 4, xval: '2009', yval: 21262640 },
        { x: 5, xval: '2010', yval: 21515750 },
        { x: 6, xval: '2011', yval: 21766710 },
        { x: 7, xval: '2012', yval: 22015580 },
        { x: 8, xval: '2013', yval: 22262500 },
        { x: 9, xval: '2014', yval: 22507620 },
    ] }
    // Assign the dataSource values to series of sparkline 'xName and yName'
    xName= 'xval' yName= 'yval'
    // Assign 'Line' as type of the sparkline
    type= 'Line' >
</SparklineComponent> );

}
export default App;
ReactDOM.render(<App />, document.getElementById('sparkline'));

Column

The [Column] type is used to render the sparkline series as column.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
export class App extends React.Component {
    render() {
        return (<SparklineComponent id='sparkline' height='150px' width='200px' dataSource={[
                { x: 0, xval: '2005', yval: 20090440 },
                { x: 1, xval: '2006', yval: 20264080 },
                { x: 2, xval: '2007', yval: 20434180 },
                { x: 3, xval: '2008', yval: 21007310 },
                { x: 4, xval: '2009', yval: 21262640 },
                { x: 5, xval: '2010', yval: 21515750 },
                { x: 6, xval: '2011', yval: 21766710 },
                { x: 7, xval: '2012', yval: 22015580 },
                { x: 8, xval: '2013', yval: 22262500 },
                { x: 9, xval: '2014', yval: 22507620 },
            ]} 
        // Assign the dataSource values to series of sparkline 'xName and yName'
        xName='xval' yName='yval' 
        // Assign 'Column' as type of the sparkline
        type='Column'>
        </SparklineComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('sparkline'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';

function App() {

  return ( <SparklineComponent id='sparkline'
    height='150px' width='200px'
    dataSource= { [
        { x: 0, xval: '2005', yval: 20090440 },
        { x: 1, xval: '2006', yval: 20264080 },
        { x: 2, xval: '2007', yval: 20434180 },
        { x: 3, xval: '2008', yval: 21007310 },
        { x: 4, xval: '2009', yval: 21262640 },
        { x: 5, xval: '2010', yval: 21515750 },
        { x: 6, xval: '2011', yval: 21766710 },
        { x: 7, xval: '2012', yval: 22015580 },
        { x: 8, xval: '2013', yval: 22262500 },
        { x: 9, xval: '2014', yval: 22507620 },
    ] }
    // Assign the dataSource values to series of sparkline 'xName and yName'
    xName= 'xval' yName= 'yval'
    // Assign 'Column' as type of the sparkline
    type= 'Column' >
</SparklineComponent> );

}
export default App;
ReactDOM.render(<App />, document.getElementById('sparkline'));

Pie

The [Pie] type is used to render the sparkline series as pie.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
export class App extends React.Component {
    render() {
        return (<SparklineComponent id='sparkline' height='200px' width='70%' dataSource={[
                { x: 0, xval: '2005', yval: 20090440 },
                { x: 1, xval: '2006', yval: 20264080 },
                { x: 2, xval: '2007', yval: 20434180 },
                { x: 3, xval: '2008', yval: 21007310 },
                { x: 4, xval: '2009', yval: 21262640 },
                { x: 5, xval: '2010', yval: 21515750 },
                { x: 6, xval: '2011', yval: 21766710 },
                { x: 7, xval: '2012', yval: 22015580 },
                { x: 8, xval: '2013', yval: 22262500 },
                { x: 9, xval: '2014', yval: 22507620 },
            ]} 
        // Assign the dataSource values to series of sparkline 'xName and yName'
        xName='xval' yName='yval' 
        // Assign 'Pie' as type of the sparkline
        type='Pie'>
        </SparklineComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('sparkline'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';

function App() {

  return ( <SparklineComponent id='sparkline'
    height='200px' width='70%'
    dataSource= { [
        { x: 0, xval: '2005', yval: 20090440 },
        { x: 1, xval: '2006', yval: 20264080 },
        { x: 2, xval: '2007', yval: 20434180 },
        { x: 3, xval: '2008', yval: 21007310 },
        { x: 4, xval: '2009', yval: 21262640 },
        { x: 5, xval: '2010', yval: 21515750 },
        { x: 6, xval: '2011', yval: 21766710 },
        { x: 7, xval: '2012', yval: 22015580 },
        { x: 8, xval: '2013', yval: 22262500 },
        { x: 9, xval: '2014', yval: 22507620 },
    ] }
    // Assign the dataSource values to series of sparkline 'xName and yName'
    xName= 'xval' yName= 'yval'
    // Assign 'Pie' as type of the sparkline
    type= 'Pie' >
</SparklineComponent> );

}
export default App;
ReactDOM.render(<App />, document.getElementById('sparkline'));

Win Loss

The [WinLoss] type is used to render the sparkline series as Win Loss.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
export class App extends React.Component {
    render() {
        return (<SparklineComponent id='sparkline' height='100px' width='70%' dataSource={[
                { x: 0, xval: '2005', yval: 20090440 },
                { x: 1, xval: '2006', yval: 20264080 },
                { x: 2, xval: '2007', yval: -20434180 },
                { x: 3, xval: '2008', yval: 21007310 },
                { x: 4, xval: '2009', yval: 21262640 },
                { x: 5, xval: '2010', yval: -21515750 },
                { x: 6, xval: '2011', yval: 21766710 },
                { x: 7, xval: '2012', yval: 22015580 },
                { x: 8, xval: '2013', yval: -22262500 },
                { x: 9, xval: '2014', yval: 22507620 },
            ]} 
        // Assign the dataSource values to series of sparkline 'xName and yName'
        xName='xval' yName='yval' 
        // Assign 'WinLoss' as type of the sparkline
        type='WinLoss'>
        </SparklineComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('sparkline'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';

function App() {

  return ( <SparklineComponent id='sparkline'
    height='100px' width='70%'
    dataSource= { [
        { x: 0, xval: '2005', yval: 20090440 },
        { x: 1, xval: '2006', yval: 20264080 },
        { x: 2, xval: '2007', yval: -20434180 },
        { x: 3, xval: '2008', yval: 21007310 },
        { x: 4, xval: '2009', yval: 21262640 },
        { x: 5, xval: '2010', yval: -21515750 },
        { x: 6, xval: '2011', yval: 21766710 },
        { x: 7, xval: '2012', yval: 22015580 },
        { x: 8, xval: '2013', yval: -22262500 },
        { x: 9, xval: '2014', yval: 22507620 },
    ] }
    // Assign the dataSource values to series of sparkline 'xName and yName'
    xName= 'xval' yName= 'yval'
    // Assign 'WinLoss' as type of the sparkline
    type= 'WinLoss' >
</SparklineComponent> );

}
export default App;
ReactDOM.render(<App />, document.getElementById('sparkline'));

Area

The [Area] type is used to render the sparkline series as area.

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
export class App extends React.Component {
    render() {
        return (<SparklineComponent id='sparkline' height='100px' width='70%' dataSource={[
                { x: 0, xval: '2005', yval: 20090440 },
                { x: 1, xval: '2006', yval: 20264080 },
                { x: 2, xval: '2007', yval: 20434180 },
                { x: 3, xval: '2008', yval: 21007310 },
                { x: 4, xval: '2009', yval: 21262640 },
                { x: 5, xval: '2010', yval: 21515750 },
                { x: 6, xval: '2011', yval: 21766710 },
                { x: 7, xval: '2012', yval: 22015580 },
                { x: 8, xval: '2013', yval: 22262500 },
                { x: 9, xval: '2014', yval: 22507620 },
            ]} 
        // Assign the dataSource values to series of sparkline 'xName and yName'
        xName='xval' yName='yval' 
        // Assign 'Area' as type of the sparkline
        type='Area'>
        </SparklineComponent>);
    }
}
ReactDOM.render(<App />, document.getElementById('sparkline'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';

function App() {

  return ( <SparklineComponent id='sparkline'
    height='100px' width='70%'
    dataSource= { [
        { x: 0, xval: '2005', yval: 20090440 },
        { x: 1, xval: '2006', yval: 20264080 },
        { x: 2, xval: '2007', yval: 20434180 },
        { x: 3, xval: '2008', yval: 21007310 },
        { x: 4, xval: '2009', yval: 21262640 },
        { x: 5, xval: '2010', yval: 21515750 },
        { x: 6, xval: '2011', yval: 21766710 },
        { x: 7, xval: '2012', yval: 22015580 },
        { x: 8, xval: '2013', yval: 22262500 },
        { x: 9, xval: '2014', yval: 22507620 },
    ] }
    // Assign the dataSource values to series of sparkline 'xName and yName'
    xName= 'xval' yName= 'yval'
    // Assign 'Area' as type of the sparkline
    type= 'Area' >
</SparklineComponent> );

}
export default App;
ReactDOM.render(<App />, document.getElementById('sparkline'));