Can I change Legend text for 3D pie chart?

[Shrabanee]

Hi,

I am using 3D pie chart. I don't want to show the default legend. Instead I want to show the legend with the corresponding value. I was checking the API but could not get any solution.
Can anyone help me with this?

[Akash Biswas]

Hi Shrabanee,

 

The legends in Pie chart represents its pie slices, and the individual legends are identified by the labels of the slices.

It is not possible to show the values instead of the labels for each legend items. Alternatively, you could use Text annotations to place the values beside the legends with the associated labels with them.

Also find a sample fiddle using Text annotations to position the values with the legends(on Right) : http://jsfiddle.net/6om2nyrL/

 

To know more about Text annotations, please check the below documentation link : https://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/creating-annotations/creating-text-annotations.html

Also find the link for "drawComplete" event to dynamically set the annotations : https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events.html#event-drawComplete

 

Please note : Annotations are static in nature, though it can be placed dynamically using the supported macros : https://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/positioning-annotations-using-macros.html

 

Thanks,

Akash

[Shrabanee]

Hi @Akash Biswas

Thanks for your response. The fiddle you have given is not showing any chart. 

 

[Akash Biswas]

Hi Shrabanee,

 

Please check this modified fiddle : https://jsfiddle.net/tvm04b5y/
 

Thanks,

Akash.

[Shrabanee]

Hi @Akash Biswas

That can help me. 

Thanks for the help  

[Shrabanee]

Hi

So I found one solution for this requirement.
I have created the label  as "label +' : '+ value", which is used to show the text in the legend.That work like a wonder for me. 

NOTE : You have to change the tooltip text and set showValues : "0" .

 

A code to try out:

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'pie3d',
        renderAt: 'chart-container',
        width: '500',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Revenue by Product Categories",
                "subCaption": "Los Angeles Topanga - Last month",
                "numberPrefix": "$",                
                "startingAngle": "90",
                "decimals": "0",
                "centerLabelFontSize": "20",
                "theme": "fint",
                "showPercentValues": "0",
                "enableSmartLabels": "0",
                "showLegend": "1",
                "showLabels" : "0",
                "showValues" : "0",
                "plotToolText": "<div style='font-size:14px'>$label</div>",
            },
            "data": [{
                "label": "Not Sold : 400",
                "value": "400"
            }, {
                "label": "Sold : 600",
                "value": "600",
                "color" : "#00ffff"
            }]
        }
    }).render();
});

Hope this will help someone.

Edited November 30, 2017 by Shrabanee
Improved the answer