Center Label in Vue Accumulation chart component

13 Jun 202417 minutes to read

Center label

Using centerLabel it is now possible to place a label at the center of a pie or donut chart. To configure the default text rendered on the center label for the pie and doughnut charts, use the text property in the centerLabel.

<template>
    <div id="app">
        <ejs-accumulationchart id="container" :centerLabel="centerLabel">
            <e-accumulation-series-collection>
                <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius='65%'>
                </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 } from "@syncfusion/ej2-vue-charts";


const seriesData = [
    { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
    { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
    { x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
    { x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
    { x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
    { x: 'Others', y: 3.6, text: 'Others: 3.6%' }
];
const centerLabel = {
    text: 'Mobile<br>Browsers<br>Statistics'
};

provide('accumulationchart', [PieSeries]);

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

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries } 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: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
                { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
                { x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
                { x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
                { x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
                { x: 'Others', y: 3.6, text: 'Others: 3.6%' }
            ],
            centerLabel: {
                text: 'Mobile<br>Browsers<br>Statistics'
            }
        };
    },
    provide: {
        accumulationchart: [PieSeries]
    }
};
</script>
<style>
#container {
    height: 350px;
}
</style>

Hover text

The default text in the center label can be changed when the mouse pointer hovers over the pie and doughnut charts slice using the hoverTextFormat property.

<template>
    <div id="app">
        <ejs-accumulationchart id="container" :centerLabel="centerLabel">
            <e-accumulation-series-collection>
                <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius='65%'>
                </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 } from "@syncfusion/ej2-vue-charts";


const seriesData = [
    { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
    { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
    { x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
    { x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
    { x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
    { x: 'Others', y: 3.6, text: 'Others: 3.6%' }
];
const centerLabel = {
    text: 'Mobile<br>Browsers<br>Statistics',
    hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%'
};

provide('accumulationchart', [PieSeries]);

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

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries } 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: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
                { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
                { x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
                { x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
                { x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
                { x: 'Others', y: 3.6, text: 'Others: 3.6%' }
            ],
            centerLabel: {
                text: 'Mobile<br>Browsers<br>Statistics',
                hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%'
            }
        };
    },
    provide: {
        accumulationchart: [PieSeries]
    }
};
</script>
<style>
#container {
    height: 350px;
}
</style>

Customization

Customize the center label text using the textStyle property.

<template>
    <div id="app">
        <ejs-accumulationchart id="container" :centerLabel="centerLabel">
            <e-accumulation-series-collection>
                <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius='65%'>
                </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 } from "@syncfusion/ej2-vue-charts";


const seriesData = [
    { x: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
    { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
    { x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
    { x: 'Samsung Internet', y: 2.7, text: 'Samsung Internet: 2.7%' },
    { x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
    { x: 'Others', y: 3.6, text: 'Others: 3.6%' }
];
const centerLabel = {
    text: 'Mobile<br>Browsers<br>Statistics',
    hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%',
    textStyle: {
        fontWeight: '900',
        size: '15px',
        color: 'red',
        fontFamily: 'Roboto',
        fontStyle: 'Italic'
    }
};

provide('accumulationchart', [PieSeries]);

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

import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries } 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: 'Chrome', y: 61.3, text: 'Chrome: 61.3%' },
            { x: 'Safari', y: 24.6, text: 'Safari: 24.6%' },
            { x: 'Edge', y: 5.0, text: 'Edge: 5.0%' },
            { x: 'Samsung Internet', y: 2.7, text:  'Samsung Internet: 2.7%' },
            { x: 'Firefox', y: 2.6, text: 'Firefox: 2.6%' },
            { x: 'Others', y: 3.6, text:  'Others: 3.6%' }
        ],
        centerLabel: {
            text : 'Mobile<br>Browsers<br>Statistics',
            hoverTextFormat: '${point.x} <br> Browser Share <br> ${point.y}%',
            textStyle:{
                fontWeight: '900',
                size: '15px',
                color: 'red',
                fontFamily: 'Roboto',
                fontStyle: 'Italic'
            }
        }
        };
  },
  provide: {
     accumulationchart: [PieSeries]
  }
};
</script>
<style>
 #container {
     height: 350px;
 }
</style>