RadChart Pie Chart Legend Help

Thread is closed for posting
4 posts, 0 answers
  1. Joshua
    Joshua avatar
    35 posts
    Member since:
    May 2012

    Posted 17 May 2012 Link to this post

    Here is my resulting chart:
    http://s15.postimage.org/7y165x8xn/mychart.jpg

    The issue that I have is I need the legend to reflect the same color that is in the pie chart, or it will be really hard to know what number goes with each piece of the pie.  I also would love to remove Quantity from the list. 

    here is my C#
    string[] ParamArgs = { "IdParam|" + HttpContext.Current.Session["Id"], "INParam|" + HttpContext.Current.Session["Current"] };
            ColorPieChart = StoreProcedureDTTable("ColorPieChart_By_Specific", ParamArgs, "ColorPieChart_By_Specific");
            ColorPieChart.ChartTitle.TextBlock.Text = "Quantity by Color";
            ColorPieChart.Legend.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.TopRight;
            ColorPieChart.DataSource = ColorPieChart;
            ColorPieChart.PlotArea.XAxis.AxisLabel.Visible = true;
            ColorPieChart.PlotArea.YAxis.AxisLabel.Visible = true;
            
            foreach (DataRow dtRow in ColorPieChart.Rows)
            {
                LabelItem item = new LabelItem();
                item.Name = dtRow["Color"].ToString();
                item.TextBlock.Text = dtRow["Color"].ToString();
                ColorPieChart.Legend.Items.Add(item);

            }
            ColorPieChart.AutoLayout = true;
            ColorPieChart.DataBind();

    Here is my aspx:
    <telerik:RadChart ID="ColorPieChart" runat="server"
                                ChartImageFormat="Jpeg" DefaultType="Pie" Height="400px" Skin="WebBlue"
                                Width="465px" Appearance-LegendDisplayMode="ItemLabels">
                                <Appearance>
                                    <FillStyle MainColor="249, 250, 251">
                                    </FillStyle>
                                    <Border Color="160, 170, 182" />
                                </Appearance>
                                <Legend>
                                    <Appearance Dimensions-Margins="17.6%, 3%, 1px, 1px"
                                        Dimensions-Paddings="2px, 8px, 6px, 3px"
                                        Position-AlignedPosition="BottomRight">
                                        <ItemTextAppearance TextProperties-Color="102, 102, 102">
                                        </ItemTextAppearance>
                                        <ItemMarkerAppearance Figure="Triangle">
                                        </ItemMarkerAppearance>
                                        <FillStyle MainColor="216, 222, 227">
                                        </FillStyle>
                                        <Border Color="160, 170, 182" />
                                    </Appearance>
                                </Legend>
                                <PlotArea>
                                    <EmptySeriesMessage Visible="True">
                                        <Appearance Visible="True">
                                        </Appearance>
                                    </EmptySeriesMessage>
                                    <XAxis>
                                        <Appearance Color="160, 160, 160">
                                            <MajorGridLines Color="227, 227, 227" Width="0" />
                                            <TextAppearance TextProperties-Color="140, 140, 140">
                                            </TextAppearance>
                                        </Appearance>
                                        <AxisLabel>
                                            <TextBlock>
                                                <Appearance TextProperties-Color="140, 140, 140">
                                                </Appearance>
                                            </TextBlock>
                                        </AxisLabel>
                                    </XAxis>
                                    <YAxis>
                                        <Appearance Color="160, 160, 160">
                                            <MajorGridLines Color="227, 227, 227" />
                                            <MinorGridLines Color="227, 227, 227" />
                                        </Appearance>
                                        <AxisLabel>
                                            <TextBlock>
                                                <Appearance TextProperties-Color="140, 140, 140">
                                                </Appearance>
                                            </TextBlock>
                                        </AxisLabel>
                                    </YAxis>
                                    <Appearance>
                                        <FillStyle FillType="Solid" MainColor="">
                                        </FillStyle>
                                    </Appearance>
                                </PlotArea>
                                <ChartTitle>
                                    <Appearance>
                                        <FillStyle MainColor="">
                                        </FillStyle>
                                    </Appearance>
                                    <TextBlock Text="Chart by Color Quantity">
                                        <Appearance TextProperties-Color="102, 102, 102"
                                            TextProperties-Font="Arial, 14pt">
                                        </Appearance>
                                    </TextBlock>
                                </ChartTitle>
                        </telerik:RadChart>


    Any help is appreciated!
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 22 May 2012 Link to this post

    Hello,

    You can check this online example where a scenario like the one that you describe is achieved. I think that you are missing the LegendDisplayMode of the Series:
    <Series>
     <telerik:ChartSeries Name="Series 1" Type="Pie" DataYColumn="Sum">
      <Appearance LegendDisplayMode="ItemLabels">

    You can try the above instead of the code that you have used:
    Appearance-LegendDisplayMode="ItemLabels"

    On a side note I want to suggest that you consider a different type of diplay. We generally believe that a pie chart with more than 6 slices is rarely useful. Also in your snapshot I see many variations of green, so even if you show the proper colors in the legend, finding the corresponding color will be very difficult. I suggest you consider using a horizontal bar chart with no legend.

    I have attached a project based on your code in which I have made some changes in order to achieve the scenario that you describe. I have added a ChartSeries mapping and I have removed the foreach, which was used to add items to the legend. Please find it attached to this post. I have also included a snapshot of the output that I get when I run the project. 

    Kind regards,
    Petar Marchev
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joshua
    Joshua avatar
    35 posts
    Member since:
    May 2012

    Posted 22 May 2012 Link to this post

    Thinks for the input, but I thought I already have that in my aspx.

    <telerik:RadChart ID="ColorPieChart" runat="server"
                                ChartImageFormat="Jpeg" DefaultType="Pie" Height="400px" Skin="WebBlue"
                                Width="465px" Appearance-LegendDisplayMode="ItemLabels">

    I also have bolded it in my original post.  Is Appearance-LegendDisplayMode isn't being applied correctly why is that?

    Thanks!
  5. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 23 May 2012 Link to this post

    Hi Joshua,

    This seems to be a discrepancy in the RadChart control. Our developers are aware of this and the issue will be looked into. In order to have the ItemLabels display mode you need to use the property that I mentioned in my previous response:
    <Series>
     <telerik:ChartSeries Name="Series 1" Type="Pie" DataYColumn="Sum">
      <Appearance LegendDisplayMode="ItemLabels">

    We apologize for any caused inconvenienced.

    Regards,
    Petar Marchev
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top