Gradient in Vue Accumulation chart control

18 Nov 201824 minutes to read

Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types:

  • Linear gradient
  • Radial gradient

Linear gradient

A linear gradient blends colors along a straight path from a defined start point to an end point. In accumulation charts, a linear gradient can be applied either to the whole series or to each point via the pointRender event. An linearGradient is configured with one or more color stops.

The linear gradient properties are:

  • x1 - Horizontal start position of the gradient (0 to 1).
  • y1 - Vertical start position of the gradient (0 to 1).
  • x2 - Horizontal end position of the gradient (0 to 1).
  • y2 - Vertical end position of the gradient (0 to 1).

Properties for gradientColorStop:

  • offset - Position along the gradient (0 to 100).
  • color - Base color at the stop.
  • opacity - Transparency (0 to 1).
  • lighten - Adjusts lightness (positive lightens, negative darkens).
  • brighten - Adjusts brightness (positive increases, negative decreases).

Apply gradient to the entire series

A linear gradient may be applied directly at the series level. The same gradient is applied uniformly to all data points, legend symbols and tooltip markers.

<template>
  <div id="app">
    <ejs-accumulation-chart id="container" :title="title" :tooltip="tooltip" :legendSettings="legendSettings"
      :enableSmartLabels="enableSmartLabels">
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource="CategoryData" type="Pie" xName="Category" yName="Share" 
          name="Share by Category" :dataLabel="dataLabel" :border="border" :linearGradient="linearGradient">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulation-chart>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationChart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";

const CategoryData = [
  { Category: "Electronics", Share: 22.5, DataLabelMappingName: "Electronics: 22.5%" },
  { Category: "Fashion", Share: 18.0, DataLabelMappingName: "Fashion: 18.0%" },
  { Category: "Home & Kitchen", Share: 15.5, DataLabelMappingName: "Home & Kitchen: 15.5%" },
  { Category: "Beauty & Health", Share: 10.0, DataLabelMappingName: "Beauty & Health: 10.0%" },
  { Category: "Sports & Outdoors", Share: 9.5, DataLabelMappingName: "Sports & Outdoors: 9.5%" },
  { Category: "Books", Share: 8.0, DataLabelMappingName: "Books: 8.0%" },
  { Category: "Toys & Games", Share: 7.0, DataLabelMappingName: "Toys & Games: 7.0%" },
  { Category: "Groceries", Share: 6.0, DataLabelMappingName: "Groceries: 6.0%" },
  { Category: "Other", Share: 3.5, DataLabelMappingName: "Other: 3.5%" }
];

const dataLabel = {
  visible: true,
  name: 'DataLabelMappingName',
  position: 'Outside',
  connectorStyle: { length: '10px' },
  font: { size: '12px' }
};

const border = {
  color: '#FFFFFF',
  width: 2
};

const linearGradient = {
  x1: 0.1, y1: 0,
  x2: 0.9, y2: 1,
  gradientColorStop: [
    { color: '#4F46E5', offset: 0, opacity: 1, brighten: 0.55 },
    { color: '#4F46E5', offset: 60, opacity: 0.98, brighten: 0.15 },
    { color: '#4F46E5', offset: 100, opacity: 0.95, brighten: -0.25 }
  ]
};

const legendSettings = { visible: true, position: 'Right' };
const tooltip = { enable: true };
const enableSmartLabels = true;
const title = 'Orders by Category';
provide('accumulationchart', [PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel]);

</script>
<style>
#container {
  height: 400px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulation-chart id="container" :title="title" :tooltip="tooltip" :legendSettings="legendSettings"
      :enableSmartLabels="enableSmartLabels">
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource="CategoryData" type="Pie" xName="Category" yName="Share" 
          name="Share by Category" :dataLabel="dataLabel" :border="border" :linearGradient="linearGradient">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulation-chart>
  </div>
</template>

<script>
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";

export default {
  name: 'App',
  components: {
    'ejs-accumulation-chart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      CategoryData: [
        { Category: "Electronics", Share: 22.5, DataLabelMappingName: "Electronics: 22.5%" },
        { Category: "Fashion", Share: 18.0, DataLabelMappingName: "Fashion: 18.0%" },
        { Category: "Home & Kitchen", Share: 15.5, DataLabelMappingName: "Home & Kitchen: 15.5%" },
        { Category: "Beauty & Health", Share: 10.0, DataLabelMappingName: "Beauty & Health: 10.0%" },
        { Category: "Sports & Outdoors", Share: 9.5, DataLabelMappingName: "Sports & Outdoors: 9.5%" },
        { Category: "Books", Share: 8.0, DataLabelMappingName: "Books: 8.0%" },
        { Category: "Toys & Games", Share: 7.0, DataLabelMappingName: "Toys & Games: 7.0%" },
        { Category: "Groceries", Share: 6.0, DataLabelMappingName: "Groceries: 6.0%" },
        { Category: "Other", Share: 3.5, DataLabelMappingName: "Other: 3.5%" }
      ],
      dataLabel: {
        visible: true,
        name: 'DataLabelMappingName',
        position: 'Outside',
        connectorStyle: { length: '10px' },
        font: { size: '12px' }
      },
      border: {
        color: '#FFFFFF',
        width: 2
      },
      linearGradient: {
        x1: 0.1, y1: 0,
        x2: 0.9, y2: 1,
        gradientColorStop: [
          { color: '#4F46E5', offset: 0, opacity: 1, brighten: 0.55 },
          { color: '#4F46E5', offset: 60, opacity: 0.98, brighten: 0.15 },
          { color: '#4F46E5', offset: 100, opacity: 0.95, brighten: -0.25 }
        ]
      },
      legendSettings: { visible: true, position: 'Right' },
      tooltip: { enable: true },
      enableSmartLabels: true,
      title: 'Orders by Category'
    };
  },
  provide: {
    accumulationchart: [PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel]
  }
}
</script>

<style>
#container {
  height: 400px;
}
</style>

Apply a gradient per point using the point render event

A diagonal linear gradient can be applied per data point using the pointRender event for a clear light-to-shadow transition.

<template>
  <div id="app">
    <ejs-accumulation-chart id="container" :title="title" :tooltip="tooltip" :legendSettings="legendSettings"
      :enableSmartLabels="enableSmartLabels" :pointRender="pointRender">
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource="CategoryData" type="Pie" xName="Category" yName="Share" 
          name="Share by Category" :dataLabel="dataLabel" :border="border">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulation-chart>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationChart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";

const CategoryData = [
  { Category: "Electronics", Share: 22.5, DataLabel: "Electronics: 22.5%" },
  { Category: "Fashion", Share: 18.0, DataLabel: "Fashion: 18.0%" },
  { Category: "Home & Kitchen", Share: 15.5, DataLabel: "Home & Kitchen: 15.5%" },
  { Category: "Beauty & Health", Share: 10.0, DataLabel: "Beauty & Health: 10.0%" },
  { Category: "Sports & Outdoors", Share: 9.5, DataLabel: "Sports & Outdoors: 9.5%" },
  { Category: "Books", Share: 8.0, DataLabel: "Books: 8.0%" },
  { Category: "Toys & Games", Share: 7.0, DataLabel: "Toys & Games: 7.0%" },
  { Category: "Groceries", Share: 6.0, DataLabel: "Groceries: 6.0%" },
  { Category: "Other", Share: 3.5, DataLabel: "Other: 3.5%" }
];

const baseColors = ["#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"];

const dataLabel = {
  visible: true,
  name: 'DataLabel',
  position: 'Outside',
  connectorStyle: { length: '10px' },
  font: { size: '12px' }
};

const border = {
  color: '#FFFFFF',
  width: 2
};

const legendSettings = { visible: true, position: 'Right' };

const tooltip = { enable: true };

const enableSmartLabels = true;

const title = 'Orders by Category';

const pointRender = function (args) {
  const idx = args.point.index;
  const base = baseColors[idx % baseColors.length];
  args.linearGradient = {
    x1: 0.05, y1: 0.0, x2: 0.95, y2: 1.0,
    gradientColorStop: [
      { offset: 0, color: base, opacity: 1, brighten: 0.85, lighten: 0 },
      { offset: 20, color: base, opacity: 0.98, brighten: 0.45, lighten: 0 },
      { offset: 50, color: base, opacity: 0.96, brighten: 0, lighten: 0 },
      { offset: 80, color: base, opacity: 0.94, brighten: -0.30, lighten: 0 },
      { offset: 100, color: base, opacity: 0.92, brighten: -0.55, lighten: 0 }
    ]
  };
};

provide('accumulationchart', [PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel]);

</script>

<style>
#container {
  height: 400px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulation-chart id="container" :title="title" :tooltip="tooltip" :legendSettings="legendSettings"
      :enableSmartLabels="enableSmartLabels" :pointRender="pointRender">
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource="CategoryData" type="Pie" xName="Category" yName="Share" 
          name="Share by Category" :dataLabel="dataLabel" :border="border">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulation-chart>
  </div>
</template>

<script>
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";

export default {
  name: 'App',
  components: {
    'ejs-accumulation-chart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      CategoryData: [
        { Category: "Electronics", Share: 22.5, DataLabel: "Electronics: 22.5%" },
        { Category: "Fashion", Share: 18.0, DataLabel: "Fashion: 18.0%" },
        { Category: "Home & Kitchen", Share: 15.5, DataLabel: "Home & Kitchen: 15.5%" },
        { Category: "Beauty & Health", Share: 10.0, DataLabel: "Beauty & Health: 10.0%" },
        { Category: "Sports & Outdoors", Share: 9.5, DataLabel: "Sports & Outdoors: 9.5%" },
        { Category: "Books", Share: 8.0, DataLabel: "Books: 8.0%" },
        { Category: "Toys & Games", Share: 7.0, DataLabel: "Toys & Games: 7.0%" },
        { Category: "Groceries", Share: 6.0, DataLabel: "Groceries: 6.0%" },
        { Category: "Other", Share: 3.5, DataLabel: "Other: 3.5%" }
      ],
      baseColors: ["#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"],
      dataLabel: {
        visible: true,
        name: 'DataLabel',
        position: 'Outside',
        connectorStyle: { length: '10px' },
        font: { size: '12px' }
      },
      border: {
        color: '#FFFFFF',
        width: 2
      },
      legendSettings: { visible: true, position: 'Right' },
      tooltip: { enable: true },
      enableSmartLabels: true,
      title: 'Orders by Category'
    };
  },
  methods: {
    pointRender: function (args) {
      const idx = args.point.index;
      const base = this.baseColors[idx % this.baseColors.length];
      args.linearGradient = {
        x1: 0.05, y1: 0.0, x2: 0.95, y2: 1.0,
        gradientColorStop: [
          { offset: 0, color: base, opacity: 1, brighten: 0.85, lighten: 0 },
          { offset: 20, color: base, opacity: 0.98, brighten: 0.45, lighten: 0 },
          { offset: 50, color: base, opacity: 0.96, brighten: 0, lighten: 0 },
          { offset: 80, color: base, opacity: 0.94, brighten: -0.30, lighten: 0 },
          { offset: 100, color: base, opacity: 0.92, brighten: -0.55, lighten: 0 }
        ]
      };
    }
  },
  provide: {
    accumulationchart: [PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel]
  }
}
</script>

<style>
#container {
  height: 400px;
}
</style>

Radial gradient

In the radialGradient:

  • cx - Sets the normalized horizontal center of the gradient (0 to 1).
  • cy - Sets the normalized vertical center of the gradient (0 to 1).
  • fx - Sets the normalized horizontal focal point from which the gradient appears to originate (0 to 1).
  • fy - Sets the normalized vertical focal point (0 to 1).
  • r - Sets the normalized radius of the gradient circle (0 to 1).

In the gradientColorStop:

  • offset - Specifies the position of the color stop along the gradient (0 to 100).
  • color - Sets the color at the stop.
  • opacity - Defines the transparency of the stop (0 to 1).
  • lighten - Adjusts lightness at the stop. Positive values lighten the color. Range: 0 to 1.
  • brighten - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Ranges: -1 to 1.

Apply a radial gradient to the entire series

A radial gradient can be applied directly at the series level. The same gradient is applied uniformly to all data points, legend symbols and tooltip markers.

<template>
  <div id="app">
    <ejs-accumulation-chart id="container" :title="title" :tooltip="tooltip" :legendSettings="legendSettings"
      :enableSmartLabels="enableSmartLabels">
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource="CategoryData" type="Pie" innerRadius="50%" xName="Category" yName="Share" 
          name="Share by Category" :dataLabel="dataLabel" :border="border" :radialGradient="radialGradient">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulation-chart>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationChart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";

const CategoryData = [
  { Category: "Electronics", Share: 22.5, DataLabel: "Electronics: 22.5%" },
  { Category: "Fashion", Share: 18.0, DataLabel: "Fashion: 18.0%" },
  { Category: "Home & Kitchen", Share: 15.5, DataLabel: "Home & Kitchen: 15.5%" },
  { Category: "Beauty & Health", Share: 10.0, DataLabel: "Beauty & Health: 10.0%" },
  { Category: "Sports & Outdoors", Share: 9.5, DataLabel: "Sports & Outdoors: 9.5%" },
  { Category: "Books", Share: 8.0, DataLabel: "Books: 8.0%" },
  { Category: "Toys & Games", Share: 7.0, DataLabel: "Toys & Games: 7.0%" },
  { Category: "Groceries", Share: 6.0, DataLabel: "Groceries: 6.0%" },
  { Category: "Other", Share: 3.5, DataLabel: "Other: 3.5%" }
];

const dataLabel = {
  visible: true,
  name: 'DataLabel',
  position: 'Outside',
  connectorStyle: { length: '10px' },
  font: { size: '12px' }
};

const border = {
  color: '#FFFFFF',
  width: 2
};

const radialGradient = {
  cx: 0.22, cy: 0.22,
  fx: 0.12, fy: 0.12, r: 0.96,
  gradientColorStop: [
    { color: '#10B981', offset: 0, opacity: 1, brighten: 0.8 },
    { color: '#10B981', offset: 30, opacity: 1, brighten: 0.3 },
    { color: '#10B981', offset: 60, opacity: 1, brighten: 0 },
    { color: '#10B981', offset: 85, opacity: 1, brighten: -0.3 },
    { color: '#10B981', offset: 100, opacity: 1, brighten: -0.6 }
  ]
};

const legendSettings = { visible: true, position: 'Right' };

const tooltip = { enable: true };

const enableSmartLabels = true;

const title = 'Orders by Category';

provide('accumulationchart', [PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel]);

</script>

<style>
#container {
  height: 400px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulation-chart id="container" :title="title" :tooltip="tooltip" :legendSettings="legendSettings"
      :enableSmartLabels="enableSmartLabels">
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource="CategoryData" type="Pie" innerRadius="50%" xName="Category" yName="Share" 
          name="Share by Category" :dataLabel="dataLabel" :border="border" :radialGradient="radialGradient">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulation-chart>
  </div>
</template>

<script>
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";

export default {
  name: 'App',
  components: {
    'ejs-accumulation-chart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      CategoryData: [
        { Category: "Electronics", Share: 22.5, DataLabel: "Electronics: 22.5%" },
        { Category: "Fashion", Share: 18.0, DataLabel: "Fashion: 18.0%" },
        { Category: "Home & Kitchen", Share: 15.5, DataLabel: "Home & Kitchen: 15.5%" },
        { Category: "Beauty & Health", Share: 10.0, DataLabel: "Beauty & Health: 10.0%" },
        { Category: "Sports & Outdoors", Share: 9.5, DataLabel: "Sports & Outdoors: 9.5%" },
        { Category: "Books", Share: 8.0, DataLabel: "Books: 8.0%" },
        { Category: "Toys & Games", Share: 7.0, DataLabel: "Toys & Games: 7.0%" },
        { Category: "Groceries", Share: 6.0, DataLabel: "Groceries: 6.0%" },
        { Category: "Other", Share: 3.5, DataLabel: "Other: 3.5%" }
      ],
      dataLabel: {
        visible: true,
        name: 'DataLabel',
        position: 'Outside',
        connectorStyle: { length: '10px' },
        font: { size: '12px' }
      },
      border: {
        color: '#FFFFFF',
        width: 2
      },
      radialGradient: {
        cx: 0.22, cy: 0.22,
        fx: 0.12, fy: 0.12, r: 0.96,
        gradientColorStop: [
          { color: '#10B981', offset: 0, opacity: 1, brighten: 0.8 },
          { color: '#10B981', offset: 30, opacity: 1, brighten: 0.3 },
          { color: '#10B981', offset: 60, opacity: 1, brighten: 0 },
          { color: '#10B981', offset: 85, opacity: 1, brighten: -0.3 },
          { color: '#10B981', offset: 100, opacity: 1, brighten: -0.6 }
        ]
      },
      legendSettings: { visible: true, position: 'Right' },
      tooltip: { enable: true },
      enableSmartLabels: true,
      title: 'Orders by Category'
    };
  },
  provide: {
    accumulationchart: [PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel]
  }
}
</script>

<style>
#container {
  height: 400px;
}
</style>

Apply a radial gradient per point using the point render event

The following example uses a distinct color palette and an off-center radial gradient to create a clear light-to-shadow effect on each data point. The gradient is configured in pointRender, so each data point receives its own radial gradient derived from its base color.

<template>
  <div id="app">
    <ejs-accumulation-chart id="container" :title="title" :tooltip="tooltip" :legendSettings="legendSettings"
      :enableSmartLabels="enableSmartLabels" :pointRender="pointRender">
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource="CategoryData" type="Pie" xName="Category" yName="Share" 
          name="Share by Category" :dataLabel="dataLabel" :border="border">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulation-chart>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationChart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";

const CategoryData = [
  { Category: "Electronics", Share: 22.5, DataLabel: "Electronics: 22.5%" },
  { Category: "Fashion", Share: 18.0, DataLabel: "Fashion: 18.0%" },
  { Category: "Home & Kitchen", Share: 15.5, DataLabel: "Home & Kitchen: 15.5%" },
  { Category: "Beauty & Health", Share: 10.0, DataLabel: "Beauty & Health: 10.0%" },
  { Category: "Sports & Outdoors", Share: 9.5, DataLabel: "Sports & Outdoors: 9.5%" },
  { Category: "Books", Share: 8.0, DataLabel: "Books: 8.0%" },
  { Category: "Toys & Games", Share: 7.0, DataLabel: "Toys & Games: 7.0%" },
  { Category: "Groceries", Share: 6.0, DataLabel: "Groceries: 6.0%" },
  { Category: "Other", Share: 3.5, DataLabel: "Other: 3.5%" }
];

const baseColors = ["#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"];

const dataLabel = {
  visible: true,
  name: 'DataLabel',
  position: 'Outside',
  connectorStyle: { length: '10px' },
  font: { size: '12px' }
};

const border = {
  color: '#FFFFFF',
  width: 2
};

const legendSettings = { visible: true, position: 'Right' };

const tooltip = { enable: true };

const enableSmartLabels = true;

const title = 'Orders by Category';

const pointRender = function (args) {
  const idx = args.point.index;
  const base = baseColors[idx % baseColors.length];
  args.radialGradient = {
    cx: 0.35, cy: 0.35, fx: 0.35, fy: 0.35, r: 0.85,
    gradientColorStop: [
      { offset: 0, color: base, opacity: 1, brighten: 0.85, lighten: 0 },
      { offset: 20, color: base, opacity: 0.98, brighten: 0.45, lighten: 0 },
      { offset: 50, color: base, opacity: 0.96, brighten: 0, lighten: 0 },
      { offset: 80, color: base, opacity: 0.94, brighten: -0.30, lighten: 0 },
      { offset: 100, color: base, opacity: 0.92, brighten: -0.55, lighten: 0 }
    ]
  };
};

provide('accumulationchart', [PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel]);

</script>

<style>
#container {
  height: 400px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulation-chart id="container" :title="title" :tooltip="tooltip" :legendSettings="legendSettings"
      :enableSmartLabels="enableSmartLabels" :pointRender="pointRender">
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource="CategoryData" type="Pie" xName="Category" yName="Share" 
          name="Share by Category" :dataLabel="dataLabel" :border="border">
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulation-chart>
  </div>
</template>

<script>
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel } from "@syncfusion/ej2-vue-charts";

export default {
  name: 'App',
  components: {
    'ejs-accumulation-chart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      CategoryData: [
        { Category: "Electronics", Share: 22.5, DataLabel: "Electronics: 22.5%" },
        { Category: "Fashion", Share: 18.0, DataLabel: "Fashion: 18.0%" },
        { Category: "Home & Kitchen", Share: 15.5, DataLabel: "Home & Kitchen: 15.5%" },
        { Category: "Beauty & Health", Share: 10.0, DataLabel: "Beauty & Health: 10.0%" },
        { Category: "Sports & Outdoors", Share: 9.5, DataLabel: "Sports & Outdoors: 9.5%" },
        { Category: "Books", Share: 8.0, DataLabel: "Books: 8.0%" },
        { Category: "Toys & Games", Share: 7.0, DataLabel: "Toys & Games: 7.0%" },
        { Category: "Groceries", Share: 6.0, DataLabel: "Groceries: 6.0%" },
        { Category: "Other", Share: 3.5, DataLabel: "Other: 3.5%" }
      ],
      baseColors: ["#0072B2", "#E69F00", "#009E73", "#D55E00", "#CC79A7", "#56B4E9", "#F0E442", "#999999", "#7F3C8D"],
      dataLabel: {
        visible: true,
        name: 'DataLabel',
        position: 'Outside',
        connectorStyle: { length: '10px' },
        font: { size: '12px' }
      },
      border: {
        color: '#FFFFFF',
        width: 2
      },
      legendSettings: { visible: true, position: 'Right' },
      tooltip: { enable: true },
      enableSmartLabels: true,
      title: 'Orders by Category'
    };
  },
  methods: {
    pointRender: function (args) {
      const idx = args.point.index;
      const base = this.baseColors[idx % this.baseColors.length];
      args.radialGradient = {
        cx: 0.35, cy: 0.35, fx: 0.35, fy: 0.35, r: 0.85,
        gradientColorStop: [
          { offset: 0, color: base, opacity: 1, brighten: 0.85, lighten: 0 },
          { offset: 20, color: base, opacity: 0.98, brighten: 0.45, lighten: 0 },
          { offset: 50, color: base, opacity: 0.96, brighten: 0, lighten: 0 },
          { offset: 80, color: base, opacity: 0.94, brighten: -0.30, lighten: 0 },
          { offset: 100, color: base, opacity: 0.92, brighten: -0.55, lighten: 0 }
        ]
      };
    }
  },
  provide: {
    accumulationchart: [PyramidSeries, AccumulationLegend, AccumulationTooltip, AccumulationDataLabel]
  }
}
</script>

<style>
#container {
  height: 400px;
}
</style>