React PieChart - Customize Appearance

To change the color of a series, use one of the following options:

  • Specify the color palette for the component.
  • Specify the color for a series.
  • Specify the color for all series.

You can also add a custom pattern or gradient fill to the series.

Use the registerPattern() or registerGradient() method to create a custom pattern or gradient.

The following example adds a gradient to all series in a PieChart:

App.js
  • import PieChart, { CommonSeriesSettings } from 'devextreme-react/chart';
  • import { registerGradient } from 'devextreme/common/charts';
  •  
  • const seriesColor = {
  • base: "#f5564a",
  • fillId: registerGradient("linear", {
  • colors: [{
  • offset: "20%",
  • color: "#97c95c"
  • }, {
  • offset: "90%",
  • color: "#eb3573"
  • }]
  • })
  • };
  •  
  • export default function App() {
  • return (
  • <PieChart ... >
  • <CommonSeriesSettings
  • color={seriesColor}
  • />
  • </PieChart>
  • );
  • }

View Demo