How to customize point colors in React Charts

To give each data point its own color (or pattern), set the pointColorMapping property on the series directive to the name of a data field whose value holds the per-point color. The chart reads that field and applies its value to each point’s fill.

Bind the property

pointColorMapping lives on the <SeriesDirective>. Pass it the name of a field that exists on every data row:

<SeriesDirective
    dataSource={data}
    xName="country"
    yName="gold"
    name="Gold"
    type="Column"
    pointColorMapping="color"
/>

In the example the data field is "color". The chart looks up data[i].color for each point and uses the value as the per-point fill.

Supported value formats

The values stored on the data field can be:

  • A CSS color name or hex code — for example, "red", "#ff0000".
  • A CSS color function — for example, "rgba(0,0,0,0.5)".
  • An SVG url(#id) reference — for example, "url(#chess)", "url(#cross)", "url(#circle)". The example uses this format so each country gets a different fill pattern instead of a solid color.

The completed example is shown below:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries,
} from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const primaryxAxis = { valueType: 'Category', title: 'Countries' };
  const primaryyAxis = {
    minimum: 0,
    maximum: 80,
    interval: 20,
    title: 'Medals',
  };
  return (
    <ChartComponent
      id="charts"
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title="Olympic Medals"
    >
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={data}
          xName="country"
          yName="gold"
          name="Gold"
          type="Column"
          pointColorMapping="color"
        ></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, Legend, Category, Tooltip, DataLabel, ColumnSeries, AxisModel
} from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
  const primaryyAxis: AxisModel = {
    minimum: 0,
    maximum: 80,
    interval: 20,
    title: 'Medals',
  };
  return (
    <ChartComponent
      id="charts"
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title="Olympic Medals"
    >
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective
          dataSource={data}
          xName="country"
          yName="gold"
          name="Gold"
          type="Column"
          pointColorMapping="color"
        ></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
export let data = [
    { country: 'USA',       gold: 50, color: 'url(#chess)' },
    { country: 'China',     gold: 40, color: 'url(#cross)' },
    { country: 'Japan',     gold: 70, color: 'url(#circle)' },
    { country: 'Australia', gold: 60, color: 'url(#chess)' },
    { country: 'France',    gold: 50, color: 'url(#rectangle)' },
    { country: 'Germany',   gold: 40, color: 'url(#chess)' },
    { country: 'Italy',     gold: 40, color: 'url(#line)' },
    { country: 'Sweden',    gold: 30, color: 'url(#cross)' }
];
export let data: Object[] = [
    { country: 'USA',       gold: 50, color: 'url(#chess)' },
    { country: 'China',     gold: 40, color: 'url(#cross)' },
    { country: 'Japan',     gold: 70, color: 'url(#circle)' },
    { country: 'Australia', gold: 60, color: 'url(#chess)' },
    { country: 'France',    gold: 50, color: 'url(#rectangle)' },
    { country: 'Germany',   gold: 40, color: 'url(#chess)' },
    { country: 'Italy',     gold: 40, color: 'url(#line)' },
    { country: 'Sweden',    gold: 30, color: 'url(#cross)' }
];

Troubleshooting

  • “Every point is the same color” — the field name passed to pointColorMapping does not match any key on the data rows, or the values are all the same string. Confirm the property references a real key and the data carries distinct values.
  • “Browser console shows Cannot read properties of undefined“ — a data row is missing the field that pointColorMapping references. Make sure every row has the field, even if the value is a fallback like "none".

See also