Axis customization in React Sparkline component
18 Jan 202324 minutes to read
You can customize axis value types and min and max values of the sparkline.
Change value type 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';
function App() {
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> );
}
export default App;
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';
function App() {
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> );
}
export default App;
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';
function App() {
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> );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sparkline'));Change min and max values of axis
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';
function App() {
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> );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sparkline'));Change value of axis
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';
function App() {
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> );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sparkline'));Axis line customization
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';
function App() {
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> );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sparkline'));