How to customize point colors in React Chart

17 Aug 20267 minutes to read

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