web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Service | Customer Service, Contact Center, Fie... / How to Display Legends...
Service | Customer Service, Contact Center, Fie...
Answered

How to Display Legends to the left of pie chart

(0) ShareShare
ReportReport
Posted on by Humble11Guy 85

Hi ,

I have created a pie chart for booking status and it is looking fine but i want the legend entries to be display at left of pie chart instead of at bottom.

Kindly help me in sorting out this issue.

Thanks.PieChartPic.PNG

I have the same question (0)
  • Suggested answer
    Community Member Profile Picture
    Community Member on at
    RE: How to Display Legends to the left of pie chart

    Hi Humble11Guy,

    Through my test in UCI, when we edit chart, the Legends at bottom, but when I click ‘show chart’ button, it displays at the top of the page.

     pastedimage1606111292409v1.png 

    pastedimage1606111324345v3.png

    I try to use ‘Advanced Chart Editor’ of XrmToolBox to change it, but which just do in the web client, not in the UCI.

     pastedimage1606111909830v4.png

    Finally, I find following document, which is the reason that it can’t work in UCI:

    The Unified Interface does not fully support chart customization yet.

    https://docs.microsoft.com/en-us/power-platform/admin/about-unified-interface

    Capabilities not yet on Unified Interface

    We released some capabilities of the legacy web client in the Unified Interface that are available in the hybrid experience. You can enable the hybrid experience to get them in the browser client.

    There are certain capabilities that continue to be unavailable in the Unified Interface and we are working to provide these in future releases:

    • Custom styling of advanced chart properties (excluding colors and basic formatting)
    • Composite address control
    • Composite fullname control
    • Global notifications
    • Admin experiences
    • Editable grids on phones
    • Learning Path

    Regards,

    Leah Ju

    Please mark as verified if the answer is helpful. Welcome to join hot discussions in Dynamics 365 Forums.

  • Humble11Guy Profile Picture
    Humble11Guy 85 on at
    RE: How to Display Legends to the left of pie chart

    Hi Leah Ju,

    Thanks for the reply.

    Actually i am using this view to display in Dynamics CRM Portal, will Dynamics portal support this one?

    Actually i need to customize this one in Dynamics portal.

    Thanks.

  • Verified answer
    Community Member Profile Picture
    Community Member on at
    RE: How to Display Legends to the left of pie chart

    Hi Humble11Guy,

    Yes, you can add Css to customize the position of the Legends in the portal after adding chart to the portal.

    you can refer following step to achieve it.

    1.clcik F12 in the page that chart exsits and find the legend under ‘Elements’ tab.

     pastedimage1606124725269v1.png

    2.clcik ‘Edit’ and go ‘Options’ tab and write css.

    Change translate value as your need.

    .highcharts-legend {
  transform: translate(120px, 140px);
}

     pastedimage1606124824392v2.png

    3.Refresh page.

    Before:

    pastedimage1606125094877v1.png

    After:

    pastedimage1606124983506v3.png

    Regards,

    Leah Ju

    Please mark as verified if the answer is helpful. Welcome to join hot discussions in Dynamics 365 Forums.

  • Humble11Guy Profile Picture
    Humble11Guy 85 on at
    RE: How to Display Legends to the left of pie chart

    Hi Leah Ju,

    I was able to bring the legends at the top of Pie chart, but here problem is it is displaying as in table (2x4) format . Can you please help me how to make those 8 statuses(legends) stacked on one another vertically at top-left.

    Thanks.

  • Humble11Guy Profile Picture
    Humble11Guy 85 on at
    RE: How to Display Legends to the left of pie chart

    Hi Leah Ju,

    When i applied the CSS for the legend item in the following way items are overlapping on each other.

    .highcharts-legend-item{

    transform: translate(-15px,10px);

    }

    So i have written the javascript to loop through each item and then apply css but it is not working as expected.

    $(document).ready(function(){

    var legendItems=$('.highcharts-legend-item').get();

    $('legendItems').each(function(){

       var y=10;

       transform.translate(-15, y);

       y=y+2;

    });

    });

    Can you please help me in sorting out this issue.

    Thanks.

  • Suggested answer
    Community Member Profile Picture
    Community Member on at
    RE: How to Display Legends to the left of pie chart

    Hi Humble11Guy,

    You can ensure that add css to highcharts-legend firstly, then add css to each highcharts-legend-item manually, not use js to set it.

    Just like following:

    pastedimage1606183039970v1.png

    Regards,

    Leah Ju

    Please mark as verified if the answer is helpful. Welcome to join hot discussions in Dynamics 365 Forums.

  • Humble11Guy Profile Picture
    Humble11Guy 85 on at
    RE: How to Display Legends to the left of pie chart

    Hi Leah Ju,

    Legend-items class is like below

    class="highcharts-legend-item highcharts-pie-series highcharts-color-1"

    class="highcharts-legend-item highcharts-pie-series highcharts-color-2"

    ...........

    i have written the css like below

    .highcharts-legend {

     transform: translate(-15px, 10px);  

    }

    .highcharts-legend-item{

    transform: translate(15px,10px);

    }

    .highcharts-legend-item{

    transform: translate(15px,30px);

    }

    .highcharts-legend-item{

    transform: translate(15px,50px);

    }

    .highcharts-legend-item{

    transform: translate(15px,70px);

    }

    .highcharts-legend-item{

    transform: translate(15px,90px);

    }

    .highcharts-legend-item{

    transform: translate(15px,110px);

    }

    .highcharts-legend-item{

    transform: translate(15px,130px);

    }

    .highcharts-legend-item{

    transform: translate(15px,150px);

    }

    .highcharts-legend-item{

    transform: translate(15px,170px);

    }

    When i wrote the css like above it is still overlapping the legends on top of another.

    .highcharts-legend {

     transform: translate(-15px, 10px);  

    }

    .highcharts-color-0{

    transform: translate(15px,10px);

    }

    .highcharts-color-1{

    transform: translate(15px,30px);

    }

    .highcharts-color-2{

    transform: translate(15px,50px);

    }

    .highcharts-color-3{

    transform: translate(15px,70px);

    }

    .highcharts-color-4{

    transform: translate(15px,90px);

    }

    .highcharts-color-5{

    transform: translate(15px,110px);

    }

    .highcharts-color-6{

    transform: translate(15px,130px);

    }

    .highcharts-color-7{

    transform: translate(15px,150px);

    }

    .highcharts-color-8{

    transform: translate(15px,170px);

    }

    When i wrote like above legends are coming as vertically and in correct way but the problem is pie chart is breaking down like below.

    forum.PNG

    Thanks.

  • Suggested answer
    Community Member Profile Picture
    Community Member on at
    RE: How to Display Legends to the left of pie chart

    Hi Humble11Guy,

    You can write css with full class name ,just as following screenshot shown:

    pastedimage1606297468718v1.png

    Now, it shows in the left of the pie and not overlapping.

    pastedimage1606297485200v2.png

    Regards,

    Leah Ju

    Please mark as verified if the answer is helpful. Welcome to join hot discussions in Dynamics 365 Forums.

  • Humble11Guy Profile Picture
    Humble11Guy 85 on at
    RE: How to Display Legends to the left of pie chart

    Hi Leah Ju,

    I was able to get the desired result with your input's already.

    Thank you so much for providing the valuable input's.

    But i am not able change the color of chart name and legend name's are displaying in short(on the wa...), how can i apply the color to chart title and show the legend name fully.

    Thanks.

  • Verified answer
    Community Member Profile Picture
    Community Member on at
    RE: How to Display Legends to the left of pie chart

    Hi Humble11Guy,

    Unfortunately, you can’t change the color of the chart title if the title is like following screenshot.

    pastedimage1606372170137v2.png

    In fact, the title is the name attribute of the chart:

    pastedimage1606372184976v3.png

    And the legend’s name display in short is the space is not enough.

    Regards,

    Leah Ju

    Please mark as verified if the answer is helpful. Welcome to join hot discussions in Dynamics 365 Forums.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Join experts in person to explore low code and AI agents at the Power Platform Community Conference sponsored by Microsoft

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Abhilash Warrier – Community Spotlight

We are honored to recognize Abhilash Warrier as our Community Spotlight honoree for…

Congratulations to the September Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Service | Customer Service, Contact Center, Field Service, Guides

#1
MVP-Daniyal Khaleel Profile Picture

MVP-Daniyal Khaleel 58

#2
Tom_Gioielli Profile Picture

Tom_Gioielli 16 Super User 2025 Season 2

#2
CU29080825-0 Profile Picture

CU29080825-0 16

Last 30 days Overall leaderboard

Featured topics

Product updates

Dynamics 365 release plans