Data markers in React Chart component
27 Jun 202324 minutes to read
Data markers are used to provide information about the data points in the series. You can add a shape to adorn each data point.
Marker
Markers can be added to points by enabling the visible option of the marker property. By default, distinct markers will be enabled for each series in the chart.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis = { valueType: 'DateTime' };
const marker = { visible: true };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' marker={marker}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import {
AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, DateTime, Tooltip, DataLabel, LineSeries
}
from '@syncfusion/ej2-react-charts';
function App() {
const primaryxAxis: AxisModel = { valueType: 'DateTime' };
const marker = { visible: true };
const data: any[] = [
{ x: new Date(2016, 0, 1), y: -7.1, y1: -3.5 }, { x: new Date(2016, 1, 1), y: -3.7, y1: 0 },
{ x: new Date(2016, 2, 1), y: 0.8, y1: 5 }, { x: new Date(2016, 3, 1), y: 6.3, y1: 10.3 },
{ x: new Date(2016, 4, 1), y: 13.3, y1: 18.3 }, { x: new Date(2016, 5, 1), y: 18.0, y1: 21 },
{ x: new Date(2016, 6, 1), y: 19.8, y1: 23.5 }, { x: new Date(2016, 7, 1), y: 18.1, y1: 21.3 },
{ x: new Date(2016, 8, 1), y: 13.1, y1: 16.3 }, { x: new Date(2016, 9, 1), y: 4.1, y1: 9 },
{ x: new Date(2016, 10, 1), y: -3.8, y1: -1.8 }, { x: new Date(2016, 11, 1), y: -6.8, y1: -3.8 }
];
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y'
type='Line' marker={marker}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1'
type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Shape
Markers can be assigned with different shapes such as Rectangle, Circle, Diamond, etc. using the shape property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis = { valueType: 'DateTime' };
const marker = { visible: true, height: 10, width: 10, shape: 'Pentagon' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest' type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, DateTime, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
function App() {
const primaryxAxis: AxisModel = { valueType: 'DateTime' };
const marker = { visible: true, height: 10, width: 10, shape: 'Pentagon' };
const data: any[] = [
{ x: new Date(2016, 0, 1), y: -7.1 }, { x: new Date(2016, 1, 1), y: -3.7 },
{ x: new Date(2016, 2, 1), y: 0.8 }, { x: new Date(2016, 3, 1), y: 6.3 },
{ x: new Date(2016, 4, 1), y: 13.3 }, { x: new Date(2016, 5, 1), y: 18.0 },
{ x: new Date(2016, 6, 1), y: 19.8 }, { x: new Date(2016, 7, 1), y: 18.1 },
{ x: new Date(2016, 8, 1), y: 13.1 }, { x: new Date(2016, 9, 1), y: 4.1 },
{ x: new Date(2016, 10, 1), y: -3.8 }, { x: new Date(2016, 11, 1), y: -6.8 }
];
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest'
type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Note : To know more about the marker shape type refer the
shape.
Images
Apart from the shapes, you can also add custom images to mark the data point using the imageUrl property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
function App() {
const data = [
{ x: "Jan", y: 60 }, { x: "Feb", y: 50 },
{ x: "Mar", y: 64 }, { x: "Apr", y: 63 },
{ x: "May", y: 81 }, { x: "Jun", y: 64 },
{ x: "Jul", y: 82 }, { x: "Aug", y: 96 },
{ x: "Sep", y: 78 }, { x: "Oct", y: 60 },
{ x: "Nov", y: 58 }, { x: "Dec", y: 56 }
];
const primaryxAxis = { title: 'Month', valueType: 'Category' };
const primaryyAxis = {
title: 'Temperature (°C)', rangePadding: 'None', labelFormat: '{value}°C',
minimum: 0, maximum: 100
};
const marker = {
visible: true, width: 10, height: 10, shape: 'Image',
imageUrl: './sun_annotation.png'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Temperature flow over months'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India' type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
function App() {
const data: any[] = [
{ x: "Jan", y: 60 }, { x: "Feb", y: 50 },
{ x: "Mar", y: 64 }, { x: "Apr", y: 63 },
{ x: "May", y: 81 }, { x: "Jun", y: 64 },
{ x: "Jul", y: 82 }, { x: "Aug", y: 96 },
{ x: "Sep", y: 78 }, { x: "Oct", y: 60 },
{ x: "Nov", y: 58 }, { x: "Dec", y: 56 }
];
const prim const primaryyAxis: AxisModel = {aryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
title: 'Temperature (°C)', rangePadding: 'None', labelFormat: '{value}°C',
minimum: 0, maximum: 100
};
const marker = {
visible: true, width: 10, height: 10, shape: 'Image',
imageUrl: './sun_annotation.png'
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Temperature flow over months'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='India'
type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Customization
Marker’s color and border can be customized using fill and border properties.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const primaryxAxis = { valueType: 'DateTime' };
const marker = {
visible: true,
fill: 'Red', height: 10, width: 10,
border: { width: 2, color: 'blue' },
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest' type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, DateTime, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
function App() {
const primaryxAxis: AxisModel = { valueType: 'DateTime' };
const marker = {
visible: true,
fill: 'Red', height: 10, width: 10,
border: { width: 2, color: 'blue' },
};
const data: any[] = [
{ x: new Date(2016, 0, 1), y: -7.1 }, { x: new Date(2016, 1, 1), y: -3.7 },
{ x: new Date(2016, 2, 1), y: 0.8 }, { x: new Date(2016, 3, 1), y: 6.3 },
{ x: new Date(2016, 4, 1), y: 13.3 }, { x: new Date(2016, 5, 1), y: 18.0 },
{ x: new Date(2016, 6, 1), y: 19.8 }, { x: new Date(2016, 7, 1), y: 18.1 },
{ x: new Date(2016, 8, 1), y: 13.1 }, { x: new Date(2016, 9, 1), y: 4.1 },
{ x: new Date(2016, 10, 1), y: -3.8 }, { x: new Date(2016, 11, 1), y: -6.8 }
];
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest'
type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Customizing specific point
You can also customize the specific marker and label using pointRender event. The pointRender event allows you to change the shape, color and border for a point.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
function App() {
const pointRender = (args) => {
if (args.point.index === 3) {
args.fill = 'red';
}
};
const primaryxAxis = { valueType: 'DateTime' };
const marker = { visible: true, height: 10, width: 10 };
return <ChartComponent id='charts' pointRender={pointRender} primaryXAxis={primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest' type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, IPointRenderEventArgs,
Legend, DateTime, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
function App() {
const pointRender = (args: IPointRenderEventArgs) => {
if (args.point.index === 3) {
args.fill = 'red'
}
};
const primaryxAxis: AxisModel = { valueType: 'DateTime' };
const marker = { visible: true, height: 10, width: 10 };
const data: any[] = [
{ x: new Date(2016, 0, 1), y: -7.1 }, { x: new Date(2016, 1, 1), y: -3.7 },
{ x: new Date(2016, 2, 1), y: 0.8 }, { x: new Date(2016, 3, 1), y: 6.3 },
{ x: new Date(2016, 4, 1), y: 13.3 }, { x: new Date(2016, 5, 1), y: 18.0 },
{ x: new Date(2016, 6, 1), y: 19.8 }, { x: new Date(2016, 7, 1), y: 18.1 },
{ x: new Date(2016, 8, 1), y: 13.1 }, { x: new Date(2016, 9, 1), y: 4.1 },
{ x: new Date(2016, 10, 1), y: -3.8 }, { x: new Date(2016, 11, 1), y: -6.8 }
];
return <ChartComponent id='charts' pointRender={pointRender}
primaryXAxis={primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest'
type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Fill marker with series color
Marker can be filled with the series color by setting the isFilled property to true.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component {
primaryxAxis = { valueType: 'DateTime' };
marker = { visible: true, height: 10, width: 10, isFilled: true };
render() {
return <ChartComponent id='charts' pointRender={this.pointRender} primaryXAxis={this.primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest' type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, IPointRenderEventArgs,
Legend, DateTime, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
function App() {
const primaryxAxis: AxisModel = { valueType: 'DateTime' };
const marker = { visible: true, height: 10, width: 10, isFilled: true };
const data: any[] = [
{ x: new Date(2016, 0, 1), y: -7.1 }, { x: new Date(2016, 1, 1), y: -3.7 },
{ x: new Date(2016, 2, 1), y: 0.8 }, { x: new Date(2016, 3, 1), y: 6.3 },
{ x: new Date(2016, 4, 1), y: 13.3 }, { x: new Date(2016, 5, 1), y: 18.0 },
{ x: new Date(2016, 6, 1), y: 19.8 }, { x: new Date(2016, 7, 1), y: 18.1 },
{ x: new Date(2016, 8, 1), y: 13.1 }, { x: new Date(2016, 9, 1), y: 4.1 },
{ x: new Date(2016, 10, 1), y: -3.8 }, { x: new Date(2016, 11, 1), y: -6.8 }
];
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='Warmest'
type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));