You can customize axis value types and min and max values of the sparkline.
You can change the sparkline value type by setting the [valueType] property to [Numeric], [Category], or [DateTime].
DateTime
You can assign date-time values to the sparkline by setting the [valueType] property to [DateTime].
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='130px' dataSource={[
{ xDate: new Date(2018, 0, 1), x: 0, yval: 4 },
{ xDate: new Date(2018, 0, 2), x: 1, yval: 4.5 },
{ xDate: new Date(2018, 0, 3), x: 2, yval: 8 },
{ xDate: new Date(2018, 0, 4), x: 3, yval: 7 },
{ xDate: new Date(2018, 0, 5), x: 4, yval: 6 },
{ xDate: new Date(2018, 0, 8), x: 5, yval: 8 },
{ xDate: new Date(2018, 0, 9), x: 6, yval: 8 },
{ xDate: new Date(2018, 0, 10), x: 7, yval: 6.5 },
{ xDate: new Date(2018, 0, 11), x: 8, yval: 4 },
{ xDate: new Date(2018, 0, 12), x: 9, yval: 5.5 }
]}
// Assign the dataSource values to series of sparkline 'xName and yName'
xName='xDate' yName='yval'
// Assign the "Column" as type of the sparkline
type='Column'
// Assign the "DateTime" as value type to the sparkline
valueType='DateTime'>
</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';
export class App extends React.Component {
render() {
return ( <SparklineComponent id='sparkline'
height='150px' width='130px'
dataSource= { [
{ xDate: new Date(2018, 0, 1), x: 0, yval: 4 },
{ xDate: new Date(2018, 0, 2), x: 1, yval: 4.5 },
{ xDate: new Date(2018, 0, 3), x: 2, yval: 8 },
{ xDate: new Date(2018, 0, 4), x: 3, yval: 7 },
{ xDate: new Date(2018, 0, 5), x: 4, yval: 6 },
{ xDate: new Date(2018, 0, 8), x: 5, yval: 8 },
{ xDate: new Date(2018, 0, 9), x: 6, yval: 8 },
{ xDate: new Date(2018, 0, 10), x: 7, yval: 6.5 },
{ xDate: new Date(2018, 0, 11), x: 8, yval: 4 },
{ xDate: new Date(2018, 0, 12), x: 9, yval: 5.5 }
] }
// Assign the dataSource values to series of sparkline 'xName and yName'
xName= 'xDate' yName= 'yval'
// Assign the "Column" as type of the sparkline
type= 'Column'
// Assign the "DateTime" as value type to the sparkline
valueType= 'DateTime'>
</SparklineComponent> );
}
}
ReactDOM.render(<App />, document.getElementById('sparkline'));Category
You can assign category values to the sparkline by setting [valueType] to [Category].
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='130px' dataSource={[
{ x: 0, xval: 'Robert', yval: 60 },
{ x: 1, xval: 'Andrew', yval: 65 },
{ x: 2, xval: 'Suyama', yval: 70 },
{ x: 3, xval: 'Michael', yval: 80 },
{ x: 4, xval: 'Janet', yval: 55 },
{ x: 5, xval: 'Davolio', yval: 90 },
{ x: 6, xval: 'Fuller', yval: 75 },
{ x: 7, xval: 'Nancy', yval: 85 }
]}
// Assign the dataSource values to series of sparkline 'xName and yName'
xName='xval' yName='yval'
// Assign the "Column" as type of the sparkline
type='Column'
// Assign the "Category" as value type to the sparkline
valueType='Category'>
</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';
export class App extends React.Component {
render() {
return ( <SparklineComponent id='sparkline'
height='150px' width='130px'
dataSource= { [
{ x: 0, xval: 'Robert', yval: 60 },
{ x: 1, xval: 'Andrew', yval: 65 },
{ x: 2, xval: 'Suyama', yval: 70 },
{ x: 3, xval: 'Michael', yval: 80 },
{ x: 4, xval: 'Janet', yval: 55 },
{ x: 5, xval: 'Davolio', yval: 90 },
{ x: 6, xval: 'Fuller', yval: 75 },
{ x: 7, xval: 'Nancy', yval: 85 }
] }
// Assign the dataSource values to series of sparkline 'xName and yName'
xName= 'xval' yName= 'yval'
// Assign the "Column" as type of the sparkline
type= 'Column'
// Assign the "Category" as value type to the sparkline
valueType= 'Category'>
</SparklineComponent> );
}
}
ReactDOM.render(<App />, document.getElementById('sparkline'));Numeric
You can assign numeric values to the sparkline by setting [valueType] to [Numeric].
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='130px' dataSource={[
{ x: 1, xval: 2010, yval: 190 },
{ x: 2, xval: 2011, yval: 165 },
{ x: 3, xval: 2012, yval: 158 },
{ x: 4, xval: 2013, yval: 175 },
{ x: 5, xval: 2014, yval: 200 },
{ x: 6, xval: 2015, yval: 180 },
{ x: 7, xval: 2016, yval: 210 }
]}
// Assign the dataSource values to series of sparkline 'xName and yName'
xName='xval' yName='yval'
// Assign the "Column" as type of the sparkline
type='Column'
// Assign the "Numeric" as value type to the sparkline
valueType='Numeric'>
</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';
export class App extends React.Component {
render() {
return ( <SparklineComponent id='sparkline'
height='150px' width='130px'
dataSource= { [
{ x: 1, xval: 2010, yval: 190 },
{ x: 2, xval: 2011, yval: 165 },
{ x: 3, xval: 2012, yval: 158 },
{ x: 4, xval: 2013, yval: 175 },
{ x: 5, xval: 2014, yval: 200 },
{ x: 6, xval: 2015, yval: 180 },
{ x: 7, xval: 2016, yval: 210 }
] }
// Assign the dataSource values to series of sparkline 'xName and yName'
xName= 'xval' yName= 'yval'
// Assign the "Column" as type of the sparkline
type= 'Column'
// Assign the "Numeric" as value type to the sparkline
valueType= 'Numeric'>
</SparklineComponent> );
}
}
ReactDOM.render(<App />, document.getElementById('sparkline'));You can change the min and max values of x-axis by setting the [minX] and [maxX] values to the [axisSettings] property. You can also change the min and max values of y-axis by setting the [minY] and [maxY] values to the [axisSettings] property.
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='130px' dataSource={[
{ x: 0, yval: 50 },
{ x: 1, yval: 30 },
{ x: 2, yval: 20 },
{ x: 3, yval: 30 },
{ x: 4, yval: 50 },
{ x: 5, yval: 40 },
{ x: 6, yval: 20 },
{ x: 7, yval: 10 },
{ x: 8, yval: 30 },
{ x: 9, yval: 10 },
{ x: 10, yval: 40 }
]}
// Assign the dataSource values to series of sparkline 'xName and yName'
xName='x' yName='yval'
// Set min and max values to the y-axis of sparkline
axisSettings={{
minY: 0, maxY: 150
}}
// Assign the "Column" as type of the sparkline
type='Column'
// Assign the "Numeric" as value type to the sparkline
valueType='Numeric'>
</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';
export class App extends React.Component {
render() {
return ( <SparklineComponent id='sparkline'
height='150px' width='130px'
dataSource= { [
{ x: 0, yval: 50 },
{ x: 1, yval: 30 },
{ x: 2, yval: 20 },
{ x: 3, yval: 30 },
{ x: 4, yval: 50 },
{ x: 5, yval: 40 },
{ x: 6, yval: 20 },
{ x: 7, yval: 10 },
{ x: 8, yval: 30 },
{ x: 9, yval: 10 },
{ x: 10, yval: 40 }
] }
// Assign the dataSource values to series of sparkline 'xName and yName'
xName= 'x' yName= 'yval'
// Set min and max values to the y-axis of sparkline
axisSettings= { {
minY: 0, maxY: 150
} }
// Assign the "Column" as type of the sparkline
type= 'Column'
// Assign the "Numeric" as value type to the sparkline
valueType= 'Numeric'>
</SparklineComponent> );
}
}
ReactDOM.render(<App />, document.getElementById('sparkline'));You can set horizontal axis line value of the sparkline by setting [value] to the [axisSettings] property. The following code example shows this.
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='130px' dataSource={[
{ x: 0, yval: 50 },
{ x: 1, yval: 30 },
{ x: 2, yval: 20 },
{ x: 3, yval: 30 },
{ x: 4, yval: 50 },
{ x: 5, yval: 40 },
{ x: 6, yval: 20 },
{ x: 7, yval: 10 },
{ x: 8, yval: 30 },
{ x: 9, yval: 10 },
{ x: 10, yval: 40 }
]}
// Assign the dataSource values to series of sparkline 'xName and yName'
xName='x' yName='yval'
// Set min and max values to the y-axis of sparkline
axisSettings={{
value: 25
}}
// Assign the "Column" as type of the sparkline
type='Column'
// Assign the "Numeric" as value type to the sparkline
valueType='Numeric'>
</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';
export class App extends React.Component {
render() {
return ( <SparklineComponent id='sparkline'
height='150px' width='130px'
dataSource= { [
{ x: 0, yval: 50 },
{ x: 1, yval: 30 },
{ x: 2, yval: 20 },
{ x: 3, yval: 30 },
{ x: 4, yval: 50 },
{ x: 5, yval: 40 },
{ x: 6, yval: 20 },
{ x: 7, yval: 10 },
{ x: 8, yval: 30 },
{ x: 9, yval: 10 },
{ x: 10, yval: 40 }
] }
// Assign the dataSource values to series of sparkline 'xName and yName'
xName= 'x' yName= 'yval'
// Set min and max values to the y-axis of sparkline
axisSettings= { {
value: 25
} }
// Assign the "Column" as type of the sparkline
type= 'Column'
// Assign the "Numeric" as value type to the sparkline
valueType= 'Numeric'>
</SparklineComponent> );
}
}
ReactDOM.render(<App />, document.getElementById('sparkline'));Axis of the sparkline can be collapsed using the [visible] property in [lineSettings]; this is not applicable for win-loss. You can customize the [color], [width], [opacity], and [dashArray] of axis 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='150px' width='130px' dataSource={[
{ x: 0, yval: 50 },
{ x: 1, yval: 30 },
{ x: 2, yval: 20 },
{ x: 3, yval: 30 },
{ x: 4, yval: 50 },
{ x: 5, yval: 40 },
{ x: 6, yval: 20 },
{ x: 7, yval: 10 },
{ x: 8, yval: 30 },
{ x: 9, yval: 10 },
{ x: 10, yval: 40 }
]}
// Assign the dataSource values to series of sparkline 'xName and yName'
xName='x' yName='yval'
// Set min and max values to the y-axis of sparkline
axisSettings={{
// To configure axis line settings
lineSettings: {
visible: true,
color: "#ff14ae",
dashArray: 5
}
}}
// Assign the "Numeric" as value type to the sparkline
valueType='Numeric'>
</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';
export class App extends React.Component {
render() {
return ( <SparklineComponent id='sparkline'
height='150px' width='130px'
dataSource= { [
{ x: 0, yval: 50 },
{ x: 1, yval: 30 },
{ x: 2, yval: 20 },
{ x: 3, yval: 30 },
{ x: 4, yval: 50 },
{ x: 5, yval: 40 },
{ x: 6, yval: 20 },
{ x: 7, yval: 10 },
{ x: 8, yval: 30 },
{ x: 9, yval: 10 },
{ x: 10, yval: 40 }
] }
// Assign the dataSource values to series of sparkline 'xName and yName'
xName= 'x' yName= 'yval'
// Set min and max values to the y-axis of sparkline
axisSettings= { {
// To configure axis line settings
lineSettings: {
visible: true,
color: "#ff14ae",
dashArray:5
}
} }
// Assign the "Numeric" as value type to the sparkline
valueType= 'Numeric'>
</SparklineComponent> );
}
}
ReactDOM.render(<App />, document.getElementById('sparkline'));