Can I edit the pie chart legend label?

Posted by: hanisz.92 on 25 July 2018, 11:26 pm EST

    • Post Options:
    • Link

    Posted 25 July 2018, 11:26 pm EST - Updated 3 October 2022, 11:25 am EST

    I want to create pivot chart. But from the sample given in the link below, the chart legend is working weirdly.

    http://www.ocn.ne.jp/?link_id=in_mypage_HD01_102

    for examples, I changed the chart type from Column to Pie. Then the legend label display like the image given below.

    I change the chart type from Pie to Column and Column to Pie again, the legend label display differently.

    Its bugged ? or its normal?

    Is there is a way i can customize the pivot chart labels?

    Im using purejs.

    Thank You

  • Posted 25 July 2018, 11:28 pm EST

    Im sorry link above is not the correct link. this is the correct link.

    https://demos.wijmo.com/5/PureJS/OlapIntro/OlapIntro/

  • Posted 27 July 2018, 3:57 am EST

    Hi,

    Thanks for notifying the issue.

    We were able to replicate the issue at our end and hence it has been forwarded to concerned team.

    In the meantime, please call invalidate method once the chart is rendered:-

    Refer to the following code snippet:-

    
    var chart=new olap.PivotChart('#pivotChart',{
    	itemsSource: panel,
    	showLegend: 'Always',
    	chartType: olap.PivotChartType.Pie
    });
    let labelsUpdated=false;
    if(chart.flexPie){
    	chart.flexPie.rendered.addHandler(()=>{
    		if(!labelsUpdated){
    			labelsUpdated=true;
    			chart.invalidate();
    		}
    	});
    }
    

    Is there is a way i can customize the pivot chart labels?

    For changing the legend label in pivot chart you may set the header property of pivotFields of binded pivotEngine.

    Please refer to the following code snippet:-

    /* create pivot panel */
    var panel=new olap.PivotPanel("#panel",{
    	itemsSource:getSimpleDataSet(1000)
    });
    /* get pivotPanel'sengine or create a new one */
    var engine=panel.engine;
    /* get field for which to change label(must be a value field) */
    var field=engine.getFields('Downloads');
    field.header="my custom header";
    /* push to value fields */
    engine.valuefields.push(field);
    

    It will successfully set the chart’s legend, but please note that custom legends are not supported in FlexPie yet.

    ~Manish

  • Posted 1 August 2018, 12:07 pm EST - Updated 3 October 2022, 11:25 am EST

    the code working fine . thank you.

    i have one more question.

    how i can apply the code above to the fields pulldown ? (the red box)

  • Posted 1 August 2018, 11:20 pm EST

    Hi,

    If we understand correctly then you would like to change the display text in the pulldown.

    If that is the case then you may do so by changing the header property of pivot fields in the same method as stated above.

    You may also refer to the following sample which implements the same:-

    https://stackblitz.com/edit/js-tu3djl?file=index.js

    ~Manish

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels