We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Legend inside SfChart but docked to a corner.

Hello,

Does anybody have an idea for how to dock a legend inside the chart area and to a corner (specifically the top-right corner, with about 5 pixel margin)?

I figure that I need to set the LegendPosition of the Legend to be Inside.
The only DockPositions available are Left, Top, Right, Bottom, and Floating. All of these options except Floating put the legend at the center of the side they represent.

If I set it to Floating, then it looks like I can use OffsetX and OffsetY to position it but that's in relation to the top-left corner, I'm wondering if there is a straightforward way to position it based on the top-right corner instead. I'm trying to avoid having to calculate the size of the chart, axes, margins etc. and then position it based on all that.

Also, since you have options to dock the legend to the right of the chart area, would it be possible for a future release to have options to dock the legend inside the chart to any of the 4 corners?

Any help is appreciated.

Thanks.

James

1 Reply

DA Devi Aruna Maharasi Murugan Syncfusion Team May 4, 2017 08:35 AM UTC

Hi James, 
  
Thanks for contacting Syncfusion Support. 
  
Currently we don’t have direct support for placing the chart legend at the top – right corner inside the chart area. However, we achieve this requirement by setting the DockPosition property of chart legend as Floating and adjusting the value of OffsetX and OffsetY property as shown in the below code snippet, 
 
<chart:SfChart.Legend> 
   <chart:ChartLegend DockPosition="Floating" OffsetX="1200" 
                      OffsetY="5"/> 
</chart:SfChart.Legend> 
  
Please find the output image 
 
  
We have prepared a demo sample for your reference and it can be downloaded from below link, 
Sample: DockPosition 
  
Regards, 
Devi 
 
 





Loader.
Live Chat Icon For mobile
Up arrow icon