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>
- );
- }
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.