Sparkline types in React Sparkline component

18 Jan 202324 minutes to read

Different types of shapes can be used to represent the sparkline. You can change the sparkline type by setting the type property. Sparkline supports the following types:

  • Line
  • Column
  • Win-Loss
  • Pie
  • Area

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'));