How to customize marker shape in React Chart

17 Aug 20267 minutes to read

To set a different marker shape for every data point in a series, hook the pointRender callback on the chart and assign args.shape based on the data point. The callback fires once per data point and lets you pick a different shape for each one.

Customize the shape per data point

The pointRender callback receives an args object whose args.point describes the current data point (for example, args.point.index, args.point.x, args.point.y). Assign a value to args.shape to override the default for that point. The example uses an array indexed by args.point.index:

const pointRender = (args) => {
    const shapes = ['Diamond', 'Circle', 'Rectangle', 'Line', 'Triangle', 'Rectangle'];
    args.shape = shapes[args.point.index];
};

Bind the callback on the <ChartComponent>:

<ChartComponent id='charts' pointRender={pointRender} ... >

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 pointRender = (args) => {
        let shapes = ['Diamond', 'Circle', 'Rectangle', 'Line', 'Triangle', 'Rectangle'];
        args.shape = shapes[args.point.index];
    };
    const primaryxAxis = { valueType: 'Category' };
    const primaryyAxis = { minimum: 0, maximum: 60, interval: 15 };
    const marker = {
        visible: true, width: 10, height: 10,
        shape: 'Diamond'
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='FB Penetration of Internet Audience' pointRender={pointRender}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='December 2007' 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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, Legend,  Category, Tooltip, DataLabel, LineSeries, Marker, IPointRenderEventArgs} from'@syncfusion/ej2-react-charts';
import { EmitType} from '@syncfusion/ej2-base';
import { data } from './datasource';
function App() {
  const pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
    let shapes: string[] = ['Diamond', 'Circle', 'Rectangle', 'Line', 'Triangle', 'Rectangle'];
    args.shape = shapes[args.point.index];
  };
  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 60, interval: 15 };
  const marker = {
    visible: true, width: 10, height: 10,
    shape: 'Diamond'
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='FB Penetration of Internet Audience'
      pointRender={pointRender}>
      <Inject services={[LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' width={2} name='December 2007'
          type='Line' marker={marker} >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 'WW',    y: 12,   text: 'World Wide' },
    { x: 'EU',    y: 5,    text: 'Europe' },
    { x: 'APAC',  y: 15,   text: 'Pacific' },
    { x: 'LATAM', y: 6.4,  text: 'Latin' },
    { x: 'MEA',   y: 30,   text: 'Africa' },
    { x: 'NA',    y: 25.3, text: 'America' }
];
export let data: Object[] = [
    { x: 'WW',    y: 12,   text: 'World Wide' },
    { x: 'EU',    y: 5,    text: 'Europe' },
    { x: 'APAC',  y: 15,   text: 'Pacific' },
    { x: 'LATAM', y: 6.4,  text: 'Latin' },
    { x: 'MEA',   y: 30,   text: 'Africa' },
    { x: 'NA',    y: 25.3, text: 'America' }
];

Troubleshooting

  • “All markers look the same regardless of the callback” — pointRender is not bound on <ChartComponent>, or the marker.visible flag is false. Both are required: the callback must be wired up, and the marker must be visible.
  • “The same shape repeats for all data points” — the callback is reading from the same data field for every point (for example, always args.point.x). Use args.point.index to vary the shape, or any other field that differs between points.
  • “Performance degrades on large series” — pointRender fires for every data point. For very long series, prefer setting marker.shape once on the series instead of overriding per point.

See also