Search results

Sparkline Types

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.

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sparkline {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='sparkline'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
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'));

Column

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

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sparkline {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='sparkline'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
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'));

Pie

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

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sparkline {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='sparkline'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
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'));

Win Loss

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

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sparkline {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='sparkline'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
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'));

Area

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

Source
Preview
index.html
index.jsx
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #sparkline {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='sparkline'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { SparklineComponent } from '@syncfusion/ej2-react-charts';
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'));