Pie Chart UI

[Trisha Ann Dela Torre]

Can we add 2 labels pie chart the actual value is inside and the percent value is outside just like in this mockup iamge?

Can we add a point(circle) at the end of the connector/line?

Attached in this thread is the mockup image.

Thanks.

Attachment: Pie_Chart.PNG_31a1f156.zip

[Nishanthi Panner Selvam]

Hi Trisha,

Greetings from Syncfusion.

We have analyzed your query. We do not have support to place labels both as inside and outside at the same time. However , we can achieve placing of label using annotation.

We have created sample based on your requirement.

Sample: https://stackblitz.com/edit/nxzgyu?file=index.ts

Unfortunately we do not have support to show point (circle) at end of connector line.

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[Trisha Ann Dela Torre]

Hi!

Thanks for the solution, another question is,In the Pie Charist, is it possible to align the Legend and it's data on the left side? I've been trying the textAlign:'left'  but it''s not working.

See attached image for the expected result. Thanks.

Attachment: Pie_Chart_Legend_abc2b4b2.rar

[Nishanthi Panner Selvam]

Trisha,

We have analyzed your reported query, we suggest you to set legend position as ‘Left’ to meet your requirement.

We have attached sample for your reference.

Code-Snippet:

legendSettings: { visible: true, position: 'Left' }

Screen-shot:

Sample:  https://stackblitz.com/edit/qbkjep?file=index.ts

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[Trisha Ann Dela Torre]

Hi!

Thanks for the solution, But I think it does not work on my code, here's my JS code for Reference.

var pie = false;

   

function chart(data = 0, current_step = false) {

    let dataAnnotation = [];

    if (data != 0) {

        categoryTitle = data[0][0];

        numberTitle = data[1][0];

        dataPoints = data[2];

        dataPoints.forEach((element,  index) => {

            dataPoints[index].text = element.x;

            dataAnnotation.push({

                content: '<div style="font-weight: 400; color: white; font-size: 14px; fontFamily:Poppins;">' + element.y + '</div>',

                region: 'Series',

                coordinateUnits: 'Point',

                x: element.x,

                y: element.y,

            });

        });

    } else {

        categoryTitle = '';

        numberTitle = '';

        dataPoints = 0;

    }

    console.log('categoryTitle', categoryTitle);

    console.log('numberTitle', numberTitle);

    console.log('dataPoints', dataPoints);

    console.log('dataAnnotation', dataAnnotation);

    if (pie != false) {

        pie.destroy();

    }

    setTimeout(function() {

   

    pie = new ej.charts.AccumulationChart({

        series: [

            {

                explode: 'Default',

                border: { color: 'white', width: 2 },

                dataSource: dataPoints,

                pointColorMapping: 'color',

                dataLabel: {

                    visible: true,

                    position: 'Outside',

                    name: 'text',

                    font: {

                        fontWeight: '400',

                        fontFamily: 'Poppins',

                        size: '16px',

                    },

                    connectorStyle: {

                        length: '20px',

                        type: 'Curve'

                    },

                    connectorShape: 'Circle',

                    connectorLineWidth: 2,

                    connectorColor: 'black',

                   

                },

                radius: ej.base.Browser.isDevice ? '60%' : '100%',

                xName: 'x',

                yName: 'y',

                legendShape: 'Circle',

                startAngle: ej.base.Browser.isDevice ? 55 : 0,

                explodeOffset: '10%',

                name: 'Browser',

                explode: 'Default',

                explodeOffset: '5%',

                enableSmartLabels: true,

                enableBorderOnMouseMove: false,

                enableAnimation: false,

                animation: { enable: true },

            }

        ],

        highlightMode: 'Zoom',

        center: { x: '50%', y: '50%',  },

        radius: ej.base.Browser.isDevice ? '80%' : '100%',

        enableSmartLabels: true,

        enableBorderOnMouseMove: false,

        legendSettings: {

            visible: true,

            reverse: true,

            position: ej.base.Browser.isDevice ? 'Bottom' : 'Left',

            alignment: 'Near',

            shape: 'Circle',

            title: 'Legend',

            titleStyle: {

                size: '18px',

                fontWeight: 'bold',

                color: '#262627',

                textAlign: 'left',

                fontFamily: 'Poppins',

                margin: '50px 50px 50px 50px',

                textAlign: 'left'

            },

            textStyle: {

                size: '16px',

                fontWeight: '400',

                fontFamily: 'Poppins',

                margin: '10px 0px 0px 0px',

            }

        },

        annotations: dataAnnotation,

        tooltip: {

            enable: true,

            format: 'Browser Share: <b>${point.y}</b>',

            header: '<b>${point.x}</b>'

        },

        title: '',

    });

    pie.appendTo('#pie-container');

    if (data == 0) {

        pie.refresh();

    }

    }, 300);

}

[Trisha Ann Dela Torre]

Another question, I'm having a problem on the data label, the data label on the top ot bottom does not show or the top ot bottom is cut out , see the previous reply for my code, I also attached the image of the current output:

Attachment: Pie_Chart__No_label_c78f83f1.zip

[Nishanthi Panner Selvam]

Hi Trisha,

Query1: DataLabel is not proper

We have ensured your reported scenario with your attached image. When there is insufficient space to accommodate the data label in chart, it may not be rendered. However, we can address this issue by adjusting the connector line length to ensure the labels are displayed in enough space. We have attached the tested sample and screenshot for your reference.

Sample: https://stackblitz.com/edit/3xbqsn?file=index.js,index.html

Query2: Legend position is not getting resolved

We have ensured your reported scenario with your attached code-snippet. Legend rendered properly as per behavior. We have attached the tested sample and screenshot for your reference. Please check with below sample.

Sample: https://stackblitz.com/edit/jpr8hf?file=index.js,index.html

• Since we are unable to replicate an issue from our end, we request you to share the following information which will be helpful for further analysis and provide you the solution sooner.
• Try to reproduce the reported scenario in above sample.

Regards,

Nishanthi