Shrabanee

Can I change Legend text for 3D pie chart?

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Shrabanee
Improved the answer

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now