HelpBot Assistant

How can I help you?

Data markers in React Chart component

3 Feb 202624 minutes to read

Data markers are visual indicators placed at each data point on a series, helping to clearly identify and highlight individual values in your chart. Markers improve readability and accessibility, especially in line and area charts where data points may otherwise be unclear. Customize marker shape, color, size, and appearance to match your design requirements.

Marker

Enable markers for data points by setting the visible option to true in the marker property. Each series receives distinct markers by default, improving visual differentiation.

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

Assign different shapes to markers such as Rectangle, Circle, Diamond, Triangle, and others using the shape property. Shape selection helps distinguish between multiple series and improves visual clarity.

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

Use custom images as markers instead of predefined shapes by setting the imageUrl property. This allows branded or thematic markers that enhance visual appeal and user engagement.

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

Customize marker appearance by modifying the fill (background color) and border properties. Combined with shape and image options, these customizations enable comprehensive marker styling to match your application design.

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

Use the pointRender event to customize markers for individual data points. This event allows you to conditionally change shape, color, and border properties based on data values or other criteria.

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

Fill markers with the series color by enabling the isFilled property. This creates a cohesive visual design where markers inherit the series color automatically.

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