This section explains how to add markers to the sparkline.
To add marker to the sparkline, specify the visible
of markerSettings
as following values. The visible
will accept multiple values too.
The following code example shows enabling markers for all points.
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='350px' axisSettings={{
minX: -1, maxX: 7, maxY: 7, minY: -1
}} dataSource={[0, 6, 4, 1, 3, 2, 5]}
// To enable markers for all points
markerSettings={{
visible: ['All']
}}>
</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='200px' width='350px'
axisSettings= { {
minX: -1, maxX: 7, maxY: 7, minY: -1
} }
dataSource= { [0, 6, 4, 1, 3, 2, 5] }
// To enable markers for all points
markerSettings= { {
visible: ['All']
} }>
</SparklineComponent> );
}
}
ReactDOM.render(<App />, document.getElementById('sparkline'));
In sparkline, markers can be enabled for particular points such as the start, end, low, high, or negative. The following code examples shows enabling markers for the high and low points.
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='350px' axisSettings={{
minX: -1, maxX: 7, maxY: 7, minY: -1
}} dataSource={[3, 6, 4, 1, 3, 2, 5]}
// To enable marker for high and low points with color customization
highPointColor='blue' lowPointColor='red' markerSettings={{
visible: ['High', 'Low']
}}>
</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='200px' width='350px'
axisSettings= { {
minX: -1, maxX: 7, maxY: 7, minY: -1
} }
dataSource= { [3, 6, 4, 1, 3, 2, 5] }
// To enable marker for high and low points with color customization
highPointColor= 'blue'
lowPointColor= 'red'
markerSettings= { {
visible: ['High', 'Low']
} }>
</SparklineComponent> );
}
}
ReactDOM.render(<App />, document.getElementById('sparkline'));
Sparkline markers can be customized in terms of fill color, border color, width, opacity, and size. The following code example shows customizing marker’s fill, border, and size.
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='350px' axisSettings={{
minX: -1, maxX: 7, maxY: 7, minY: -1
}} dataSource={[3, 6, 4, 1, 3, 2, 5]}
// To enable marker for high and low points with color customization
fill='blue' markerSettings={{
visible: ['All'],
size: 5, fill: 'white', border: { color: 'blue', width: 2 }
}}>
</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='200px' width='350px'
axisSettings= { {
minX: -1, maxX: 7, maxY: 7, minY: -1
} }
dataSource= { [3, 6, 4, 1, 3, 2, 5] }
// To enable marker for high and low points with color customization
fill= 'blue'
markerSettings= { {
visible: ['All'],
size: 5, fill: 'white', border: { color: 'blue', width: 2}
} }>
</SparklineComponent> );
}
}
ReactDOM.render(<App />, document.getElementById('sparkline'));