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:
jQuery
index.js
const registerGradient = DevExpress.common.charts.registerGradient; $(() => { $('#polarChart').dxPieChart({ // ... commonSeriesSettings: { color: { base: "#f5564a", fillId: registerGradient("linear", { colors: [{ offset: "20%", color: "#97c95c" }, { offset: "90%", color: "#eb3573" }] }) } } }); });
Angular
app.component.html
app.component.ts
<dx-polar-chart ... > <dxo-common-series-settings [color]="seriesColor"> </dxo-common-series-settings> </dx-polar-chart>
import { registerGradient } from "devextreme/common/charts"; export class AppComponent { seriesColor = { base: "#f5564a", fillId: registerGradient("linear", { colors: [{ offset: "20%", color: "#97c95c" }, { offset: "90%", color: "#eb3573" }] }); }; }
Vue
App.vue (Options API)
App.vue (Composition API)
<template> <DxPieChart ... > <DxCommonSeriesSettings :color="seriesColor" /> </DxPieChart> </template> <script> import DxPieChart, { DxCommonSeriesSettings } from 'devextreme-vue/chart'; import { registerGradient } from 'devextreme/common/charts'; export default { components: { DxPieChart, DxCommonSeriesSettings }, data() { return { // ... seriesColor: { base: '#f5564a', fillId: registerGradient("linear", { colors: [{ offset: "20%", color: "#97c95c" }, { offset: "90%", color: "#eb3573" }] }) } } } }; </script>
<template> <DxPieChart ... > <DxCommonSeriesSettings :color="seriesColor" /> </DxPieChart> </template> <script setup> import DxPieChart, { DxCommonSeriesSettings } from 'devextreme-vue/chart'; import { registerGradient } from 'devextreme/common/charts'; // ... const seriesColor = { base: '#f5564a', fillId: registerGradient("linear", { colors: [{ offset: "20%", color: "#97c95c" }, { offset: "90%", color: "#eb3573" }] }) }; </script>
React
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.