Data markers are used to provide information about the data points in the series. You can add a shape to adorn each data point.
Markers can be added to the points by enabling the visible option of the marker property.
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';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'DateTime' };
public marker = { visible: true };
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y'
type='Line' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Markers can be assigned with different shapes such as Rectangle, Circle, Diamond etc using the shapeproperty.
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';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'DateTime' };
public marker = { visible: true, height: 10, width: 10, shape: 'Pentagon' };
render() {
return <ChartComponent id='charts'
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={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));Note : To know more about the marker shape type refer the
shape.
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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{}, {}> {
public 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 }
];
public primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
public primaryyAxis: AxisModel = {
title: 'Temperature (°C)', rangePadding: 'None', labelFormat: '{value}°C',
minimum: 0, maximum: 100
};
public marker = {
visible: true, width: 10, height: 10, shape: 'Image',
imageUrl: './sun_annotation.png'
};
render() {
return <ChartComponent id='charts'
primaryXAxis={this.primaryxAxis}
primaryYAxis={this.primaryyAxis}
title='Temperature flow over months'>
<Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='x' yName='y' width={2} name='India'
type='Line' marker={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, DateTime, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public primaryxAxis: AxisModel = { valueType: 'DateTime' };
public marker = {
visible: true,
fill: 'Red', height: 10, width: 10,
border: { width: 2, color: 'blue' },
};
render() {
return <ChartComponent id='charts'
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={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));You can also customize the specific marker and label using
pointRender event. 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 { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, IPointRenderEventArgs,
Legend, DateTime, Tooltip, DataLabel, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from 'datasource.ts';
class App extends React.Component<{}, {}> {
public pointRender = (args: IPointRenderEventArgs) => {
if (args.point.index === 3) {
args.fill = 'red'
}
};
public primaryxAxis: AxisModel = { valueType: 'DateTime' };
public marker = { visible: true, height: 10, width: 10 };
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={this.marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));