how to add table legend in Pie Chart

Thread is closed for posting
2 posts, 0 answers
  1. Wael
    Wael avatar
    3 posts
    Member since:
    Aug 2012

    Posted 30 Jan 2014 Link to this post

    How can we add a table legend above the Pie Chart along with the color, percentage name etc ..
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 03 Feb 2014 Link to this post

    Hello Wael,

    If you want to display a standard legend above the pie chart you must set the following properties:
    • ChartSeries.Appearance-LegendDisplayMode in order to declare where the legend items will be obtained. For example if you set it to ItemLabels, data will be obtained from the Name property of each series item.
    • Legend.Appearance Position-AlignedPosition in order to align the legend. For example by setting it to "Top" the legend will be aligned above the chart.

    For example:

    <telerik:RadChart ID="RadChart1" runat="server" Width="300" Height="300">
        <Series>
            <telerik:ChartSeries Type="Pie" Appearance-LegendDisplayMode="ItemLabels" Name="series 1" DefaultLabelValue="#%">
                <Items>
                    <telerik:ChartSeriesItem YValue="10" Name="item 1"></telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="30" Name="item 2"></telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="20" Name="item 3"></telerik:ChartSeriesItem>
                </Items>
            </telerik:ChartSeries>
        </Series>
        <PlotArea Appearance-Dimensions-Margins="80"></PlotArea>
        <Legend>
            <Appearance Position-AlignedPosition="Top">
            </Appearance>
        </Legend>
        <ChartTitle Appearance-Position-AlignedPosition="Bottom"></ChartTitle>
    </telerik:RadChart>

    If you want to display a DataTable for the chart, then you must set the PlotArea.DataTable property to Visible. For example:
    <telerik:RadChart ID="RadChart2" runat="server" Width="300" Height="300">
        <Series>
            <telerik:ChartSeries Type="Pie" Appearance-LegendDisplayMode="Nothing" Name="series 1" DefaultLabelValue="#%">
                <Appearance>
                    <LabelAppearance>
                    </LabelAppearance>
                </Appearance>
                <Items>
                    <telerik:ChartSeriesItem YValue="10" Name="item 1"></telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="30" Name="item 2"></telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="20" Name="item 3"></telerik:ChartSeriesItem>
                </Items>
            </telerik:ChartSeries>
        </Series>
        <PlotArea Appearance-Dimensions-Margins="80">
            <DataTable Visible="true" Appearance-Position-X="15" Appearance-Position-Y="47" Appearance-Position-Auto="false">
            </DataTable>
        </PlotArea>
        <ChartTitle Appearance-Position-AlignedPosition="Bottom"></ChartTitle>
    </telerik:RadChart>

    As for the percentage display of the labels you can set the DefaultLabelValue property of the series to "#%". More information on the matter is available in DefaultLabelValue article.


    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top