Data markers in React Chart component

19 Sep 202424 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';
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';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { 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"));
export let data = [
    { 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 }
];
export let data: Object[] = [
    { 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 }
];

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';
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';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { 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"));
export let data = [
    { 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 }
];
export let data: Object[] = [
    { 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 }
];

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';
import { data } from './datasource';
function App() {
  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, MarkerSettingsModel
} from '@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {
  const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
  const primaryyAxis: AxisModel = {
    title: 'Temperature (°C)', rangePadding: 'None', labelFormat: '{value}°C',
    minimum: 0, maximum: 100
  };
  const marker: MarkerSettingsModel = {
    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"));
export let 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 }
];
export let data: Object[] = [
    { 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 }
];

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';
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';
import { data } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { 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"));
export let data = [
    { 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 }
];
export let data: Object[] = [
    { 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 }
];

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';
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';
import { data } from './datasource';
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 };

  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"));
export let data = [
    { 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 }
];
export let data: Object[] = [
    { 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 }
];

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';
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';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { valueType: 'DateTime' };
  const marker = { visible: true, height: 10, width: 10, isFilled: true };

    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"));
export let data = [
    { 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 }
];
export let data: Object[] = [
    { 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 }
];

See Also