Vue PolarChart - Customize Appearance

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

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

Besides color change, you can add a custom pattern or gradient fill to the following 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 PolarChart:

App.vue (Options API)
App.vue (Composition API)
  • <template>
  • <DxPolarChart ... >
  • <DxCommonSeriesSettings
  • :color="seriesColor"
  • />
  • </DxPolarChart>
  • </template>
  • <script>
  • import DxPolarChart, { DxCommonSeriesSettings } from 'devextreme-vue/chart';
  • import { registerGradient } from 'devextreme/common/charts';
  •  
  • export default {
  • components: {
  • DxPolarChart,
  • DxCommonSeriesSettings
  • },
  • data() {
  • return {
  • // ...
  • seriesColor: {
  • base: '#f5564a',
  • fillId: registerGradient("linear", {
  • colors: [{
  • offset: "20%",
  • color: "#97c95c"
  • }, {
  • offset: "90%",
  • color: "#eb3573"
  • }]
  • })
  • }
  • }
  • }
  • };
  • </script>
  • <template>
  • <DxPolarChart ... >
  • <DxCommonSeriesSettings
  • :color="seriesColor"
  • />
  • </DxPolarChart>
  • </template>
  • <script setup>
  • import DxPolarChart, { 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>