Legend in Vue Accumulation chart component

21 Dec 202424 minutes to read

As like a chart, the legend is also available for accumulation charts, which gives information about the points. By default, the legend will be placed on the right, if the width of the chart is high or will be placed on the bottom, if the height of the chart is high. Other customization features regarding the legend element are same as the chart legend. Here, the legend for a point can be collapsed by giving the empty string to the x value of the point.

<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' radius='70%'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
  { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
  { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
  { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
  { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
];
const legendSettings = {
  visible: true
};

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' radius='70%'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import {  AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


export default {
  name: "App",
  components: {
    "ejs-accumulationchart": AccumulationChartComponent,
    "e-accumulation-series-collection": AccumulationSeriesCollectionDirective,
    "e-accumulation-series": AccumulationSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
        { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
        { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
        { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
        { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
      ],
      legendSettings: {
        visible: true
      }
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationLegend]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Position and Alignment

By using the position property, you can position the legend at the left, right, top or bottom of the chart. You can also align the legend to center, far or near of the chart using the alignment property.

<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' radius='70%'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
  { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
  { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
  { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
  { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
];
const legendSettings = { position: 'Top', alignment: 'Near' };

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' radius='70%'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-accumulationchart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
        { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
        { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
        { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
        { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
      ],
      legendSettings: { position: 'Top', alignment: 'Near' }
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationLegend]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Legend Reverse

You can reverse the order of the legend items by using the reverse property. By default, legend for the first series in the collection will be placed first.

<template>
  <ejs-accumulationchart id="container" ref="pie" style="display: block" :legendSettings="legendSettings"
    :tooltip="tooltip" :enableAnimation="enableAnimation" :enableSmartLabels="enableSmartLabels">
    <e-accumulation-series-collection>
      <e-accumulation-series :dataSource="data" xName="x" yName="y" :radius="radius" innerRadius="20%"
        :dataLabel="dataLabel">
      </e-accumulation-series>
    </e-accumulation-series-collection>
  </ejs-accumulationchart>
</template>
<script setup>
import { provide } from "vue";

import {
  AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries,
  AccumulationLegend,
  PieSeries,
  AccumulationDataLabel,
  AccumulationTooltip,
} from "@syncfusion/ej2-vue-charts";


const data = [
  { x: "Argentina", y: 505370, r: "50%" },
  { x: "Belgium", y: 551500, r: "70%" },
  { x: "Cuba", y: 312685, r: "84%" },
  { x: "Dominican Republic", y: 350000, r: "97%" },
  { x: "Egypt", y: 301000, r: "84%" },
  { x: "Kazakhstan", y: 300000, r: "70%" },
  { x: "Somalia", y: 357022, r: "90%" },
];
const radius = "r";
const legendSettings = { visible: true, reverse: true };
const dataLabel = { visible: true, position: "Outside", name: "x" };
const tooltip = {
  enable: true,
  header: "<b>${point.x}</b>",
  format: "Composition: <b>${point.y}</b>",
};
const enableAnimation = true;
const enableSmartLabels = true;

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

</script>
<template>
  <ejs-accumulationchart
    id="container"
    ref="pie"
    style="display: block"
    :legendSettings="legendSettings"
    :tooltip="tooltip"
    :enableAnimation="enableAnimation"
    :enableSmartLabels="enableSmartLabels"
  >
    <e-accumulation-series-collection>
      <e-accumulation-series
        :dataSource="data"
        xName="x"
        yName="y"
        :radius="radius"
        innerRadius="20%"
        :dataLabel="dataLabel"
      >
      </e-accumulation-series>
    </e-accumulation-series-collection>
  </ejs-accumulationchart>
</template>
<script>

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



export default{
  name: "App",
  components: {
    "ejs-accumulationchart": AccumulationChartComponent,
    "e-accumulation-series-collection": AccumulationSeriesCollectionDirective,
    "e-accumulation-series": AccumulationSeriesDirective
  },
  data: function () {
    return {
      data: [
        { x: "Argentina", y: 505370, r: "50%" },
        { x: "Belgium", y: 551500, r: "70%" },
        { x: "Cuba", y: 312685, r: "84%" },
        { x: "Dominican Republic", y: 350000, r: "97%" },
        { x: "Egypt", y: 301000, r: "84%" },
        { x: "Kazakhstan", y: 300000, r: "70%" },
        { x: "Somalia", y: 357022, r: "90%" },
      ],
      radius: "r",
      legendSettings: { visible: true, reverse: true },
      dataLabel: { visible: true, position: "Outside", name: "x" },
      tooltip: {
        enable: true,
        header: "<b>${point.x}</b>",
        format: "Composition: <b>${point.y}</b>",
      },
      enableAnimation: true,
      enableSmartLabels: true,
    };
  },
  provide: {
    accumulationchart: [
      AccumulationLegend,
      PieSeries,
      AccumulationDataLabel,
      AccumulationTooltip
    ]
  },
};
</script>

Legend Shape

To change the legend icon shape, use the legendShape property in the series. By default, legend icon shape
is seriesType.

<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' legendShape='Rectangle'>
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
  { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
  { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
  { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
  { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
];
const legendSettings = { visible: true };

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' legendShape='Rectangle'>
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-accumulationchart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
        { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
        { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
        { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
        { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
      ],
      legendSettings: { visible: true }
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationLegend]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Legend Size

The legend size can be changed by using the width and height properties of the legendSettings.

<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
  { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
  { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
  { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
  { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
];
const legendSettings = { width: '150', height: '100', border: { width: 1, color: 'pink' } };

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


export default {
  name: "App",
  components: {
    'ejs-accumulationchart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
        { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
        { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
        { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
        { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
      ],
      legendSettings: { width: '150', height: '100', border: { width: 1, color: 'pink' } }
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationLegend]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Legend Item Size

You can customize the size of the legend items by using the shapeHeight and shapeWidth properties.

<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
  { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
  { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
  { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
  { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
];
const legendSettings = { shapeHeight: 15, shapeWidth: 15 }

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


export default {
  name: "App",
  components: {
    'ejs-accumulationchart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
        { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
        { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
        { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
        { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
      ],
      legendSettings: { shapeHeight: 15, shapeWidth: 15 }
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationLegend]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Paging for Legend

Paging will be enabled by default, when the legend items exceeds the legend bounds. You can view the each legend item by navigating between the pages using the navigation buttons.

<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
  { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
  { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
  { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
  { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
];
const legendSettings = { height: '150', width: '80' };

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
    <div id="app">
         <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
            <e-accumulation-series-collection>
                <e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
    </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
    'ejs-accumulationchart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      seriesData: [
           { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
           { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
           { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
           { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
            { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
            ],
       legendSettings:{ height: '150', width:'80' }
    };
  },
  provide: {
     accumulationchart: [PieSeries, AccumulationLegend]
  }
};
</script>
<style>
 #container {
     height: 350px;
 }
</style>

Legend Text Wrap

When the legend text exceeds the container, the text can be wrapped by using textWrap Property. End user can also wrap the legend text based on the maximumLabelWidth property.

<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { 'x': 'Net-tution', y: 21, text: '21%' },
  { 'x': 'Private Gifts', y: 8, text: '8%' },
  { 'x': 'All Other', y: 9, text: '9%' },
  { 'x': 'Local Revenue', y: 4, text: '4%' },
  { 'x': 'State Revenue', y: 21, text: '21%' },
  { 'x': 'Federal Revenue', y: 16, text: '16%' },
  { 'x': 'Self-supporting Operations', y: 21, text: '21%' },
];

const legendSettings = { visible: true, position: 'Right', textWrap: 'Wrap', maximumLabelWidth: 60, height: '44%', width: '64%' };

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-accumulationchart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { 'x': 'Net-tution', y: 21, text: '21%' },
        { 'x': 'Private Gifts', y: 8, text: '8%' },
        { 'x': 'All Other', y: 9, text: '9%' },
        { 'x': 'Local Revenue', y: 4, text: '4%' },
        { 'x': 'State Revenue', y: 21, text: '21%' },
        { 'x': 'Federal Revenue', y: 16, text: '16%' },
        { 'x': 'Self-supporting Operations', y: 21, text: '21%' },
      ],
      xName: 'x', yName: 'y', startAngle: 0, endAngle: 360,
      innerRadius: '40%',
      type: 'Pie',
      legendSettings: { visible: true, position: 'Right', textWrap: 'Wrap', maximumLabelWidth: 60, height: '44%', width: '64%' }
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationLegend]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Enable Animation

You can customize the animation while clicking legend by setting enableAnimation as true or false using enableAnimation property in Accumulation Chart.

<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' legendShape='Rectangle'>
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
  { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
  { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
  { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
  { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
];
const legendSettings = { visible: true };

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' legendShape='Rectangle'>
        </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-accumulationchart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
        { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
        { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
        { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
        { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
      ],
      legendSettings: { visible: true }
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationLegend]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Legend Title

You can set title for legend using title property in legendSettings. You can also customize the fontStyle, size, fontWeight, color, textAlignment, fontFamily, opacity and textOverflow of legend title. titlePosition is used to set the legend position in Top, Left and Right position. maximumTitleWidth is used to set the width of the legend title. By default, it will be 100px.

<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' radius='70%'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
  { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
  { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
  { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
  { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
];
const legendSettings = { visible: true, title: 'Months', position: 'Bottom' };

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' radius='70%'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


export default {
  name: "App",
  components: {
    'ejs-accumulationchart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
        { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
        { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
        { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
        { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 }
      ],
      legendSettings: { visible: true, title: 'Months', position: 'Bottom' }
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationLegend]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Arrow Page Navigation

By default, the page number will be enabled while legend paging. Now, you can disable that page number and also you can get left and right arrows for page navigation. You have to set false value to enablePages to get this support.

<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' radius='70%'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
  { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
  { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
  { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
  { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
  { x: 'Nov', y: 15 }, { x: 'Dec', y: 15 }
];
const legendSettings = { width: '260px', height: '50px', enablePages: false, position: 'Bottom' };

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' radius='70%'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";


export default {
  name: "App",
  components: {
    'ejs-accumulationchart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
        { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
        { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
        { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
        { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
        { x: 'Nov', y: 15 }, { x: 'Dec', y: 15 }
      ],
      legendSettings: { width: '260px', height: '50px', enablePages: false, position: 'Bottom' }
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationLegend]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Legend Item Padding

The itemPadding property can be used to adjust the space between the legend items.

<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' radius='70%'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
  { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
  { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
  { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
  { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
  { x: 'Nov', y: 15 }, { x: 'Dec', y: 15 }
];
const legendSettings = { width: '260px', height: '50px', position: "Bottom", itemPadding: 30 };

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' radius='70%'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-accumulationchart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 3 }, { x: 'Feb', y: 3.5 },
        { x: 'Mar', y: 7 }, { x: 'Apr', y: 13.5 },
        { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
        { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
        { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
        { x: 'Nov', y: 15 }, { x: 'Dec', y: 15 }
      ],
      legendSettings: { width: '260px', height: '50px', position: "Bottom", itemPadding: 30 }
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationLegend]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Legend layout

The layout property in legendSettings allows you to display the legend either horizontally or vertically. By default, the layout is set to Auto. The maximumColumns property in legendSettings defines the maximum number of columns that can be displayed within the available space when using the auto layout. Additionally, enabling the fixedWidth property in legendSettings ensures that all legend items are displayed with equal widths. The width of each item is determined by the maximum width among the legend items.

<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { AccumulationChartComponent as EjsAccumulationchart, AccumulationSeriesCollectionDirective as EAccumulationSeriesCollection, AccumulationSeriesDirective as EAccumulationSeries, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: 'Jan', y: 3 },  { x: 'Feb', y: 3.5 },
  { x: 'Mar', y: 7 },  { x: 'Apr', y: 13.5 },
  { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
  { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
  { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
  { x: 'Nov', y: 15 }, { x: 'Dec', y: 15 }
];
const legendSettings = { 
  visible: true,
  layout: "Auto",
  maximumColumns: 3,
  fixedWidth: true
};

provide('accumulationchart', [PieSeries, AccumulationLegend]);

</script>
<style>
  #container {
    height: 350px;
  }
</style>
<template>
  <div id="app">
    <ejs-accumulationchart id="container" :legendSettings='legendSettings'>
      <e-accumulation-series-collection>
        <e-accumulation-series :dataSource='seriesData' xName='x' yName='y'> </e-accumulation-series>
      </e-accumulation-series-collection>
    </ejs-accumulationchart>
  </div>
</template>
<script>

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationLegend } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-accumulationchart': AccumulationChartComponent,
    'e-accumulation-series-collection': AccumulationSeriesCollectionDirective,
    'e-accumulation-series': AccumulationSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Jan', y: 3 },  { x: 'Feb', y: 3.5 },
        { x: 'Mar', y: 7 },  { x: 'Apr', y: 13.5 },
        { x: 'May', y: 19 }, { x: 'Jun', y: 23.5 },
        { x: 'Jul', y: 26 }, { x: 'Aug', y: 25 },
        { x: 'Sep', y: 21 }, { x: 'Oct', y: 15 },
        { x: 'Nov', y: 15 }, { x: 'Dec', y: 15 }
      ],
      legendSettings: { 
        visible: true,
        layout: "Auto",
        maximumColumns: 3,
        fixedWidth: true
      }
    };
  },
  provide: {
    accumulationchart: [PieSeries, AccumulationLegend]
  }
};
</script>
<style>
  #container {
    height: 350px;
  }
</style>