RadChart - Change Legend of Skin

Thread is closed for posting
6 posts, 0 answers
  1. Adler
    Adler avatar
    10 posts
    Member since:
    Feb 2014

    Posted 10 Feb 2014 Link to this post

    Hello,

    I am using RadChart, and when i apply skin ( LightBlue ), i am try change legend color, and no change.
    If i no use skin, its work. Else no work.

    Anybody can help?

    Partof HTML
                                <td colspan="2" align="center">
                                    <telerik:RadChart ID="chtDesempenhoProcesso1" runat="server" Width="970px" Height="420px"  OnDataBound="chtDesempenhoProcesso1_DataBound" Skin="LightBlue" AutoTextWrap="true">
                                        <PlotArea>
                                            <EmptySeriesMessage Visible="True">
                                                <Appearance Visible="True">
                                                </Appearance>
                                            </EmptySeriesMessage>
                                            <Appearance>
                                                <Border Width="0" Visible="true" />
                                            </Appearance>
                                            <XAxis DataLabelsColumn="Area">
                                            </XAxis>
                                            <YAxis MinValue="0" MaxValue="100" AutoScale="false" Step="10" Appearance-MinorGridLines-Visible="false" Appearance-MajorGridLines-Visible="false">
                                            </YAxis>
                                        </PlotArea>
                                        <ChartTitle>
                                            <TextBlock Text="Dimensão">
                                            </TextBlock>
                                        </ChartTitle>

                                    </telerik:RadChart>
                                </td>

    aspx.cs

        protected void chtDesempenhoProcesso1_DataBound(object sender, EventArgs e)
        {
            chtDesempenhoProcesso1.PlotArea.XAxis[0].TextBlock.Appearance.TextProperties.Font = new System.Drawing.Font(new System.Drawing.Font("Arial", 10), System.Drawing.FontStyle.Bold);

            if (chtDesempenhoProcesso1.Chart.PlotArea.XAxis.Items.Count > 0)
            {
                for (int i = 0; i < chtDesempenhoProcesso1.Chart.PlotArea.XAxis.Items.Count; i++)
                {
                    ChartSeriesItem item = chtDesempenhoProcesso1.Series[5].Items[i];
                    item.Appearance.FillStyle.MainColor = System.Drawing.Color.DarkGray;
                    item.Appearance.FillStyle.SecondColor = System.Drawing.Color.Gray;
                    item.Appearance.Shadow.Distance = 155;
                    item.Appearance.Border.Color = System.Drawing.Color.Gray;

                  }
                    // This code no change legend color
                chtDesempenhoProcesso1.Series[5].Appearance.FillStyle.MainColor = System.Drawing.Color.DarkGray;
            }

        }

    thx..
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 13 Feb 2014 Link to this post

    Hello Adler,

    What I can suggest is that you combine the desired Skin with a particular SeriesPalette. You can also create your own SeriesPalette, in order to custom colorize the series and use the one of the predefined Skins to colorize the rest of the charts elements.

    You can retrieve SeriesPalette from your Telerik UI controls' source code local installation path: RadControlsAjaxSource\Telerik.Web.UI\ChartingEngine\Styles\Skins\ChartSkinsCollection.resx file.

    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
  4. Adler
    Adler avatar
    10 posts
    Member since:
    Feb 2014

    Posted 13 Feb 2014 in reply to Danail Vasilev Link to this post

    Hi Danail , very thx for try help.
    There are other possibilities?

    I am thinking in recreate new skin like "LightBlue" and change.

    I am creating my Series as like this function

       protected void btnFindGraficProcess_Click(object sender, EventArgs e)
        {

            ObjectDataSource odsSource = (ObjectDataSource)RadPageView1.FindControl(gridDesempenhoProcesso.DataSourceID);
            DataView dvwSource = (DataView)odsSource.Select();
            DataTable dtbSource = null;
            dvwSource.RowFilter = "id_dimensao IN (" + ddtSegmentoProcesso.SelectedValue + ")";
            dvwSource.Sort = "Dimensao";
            dtbSource = dvwSource.ToTable().Copy();
            string id_dimensao = null;
            id_dimensao = dtbSource.Rows[0]["id_dimensao"].ToString();
            DataTable dtbSourceFinal = null;

            chtDesempenhoProcesso1.RemoveAllSeries();

                chtDesempenhoProcesso1.AddChartSeries(new Telerik.Charting.ChartSeries() { Name = "Student", DataYColumn = "Student", DefaultLabelValue = "#Y{N2}" });
                chtDesempenhoProcesso1.AddChartSeries(new Telerik.Charting.ChartSeries() { Name = "Teacher", DataYColumn = "Teacher", DefaultLabelValue = "#Y{N2}" });
                chtDesempenhoProcesso1.AddChartSeries(new Telerik.Charting.ChartSeries() { Name = "Director", DataYColumn = "Director", DefaultLabelValue = "#Y{N2}" });
                chtDesempenhoProcesso1.AddChartSeries(new Telerik.Charting.ChartSeries() { Name = "Employee", DataYColumn = "Employee", DefaultLabelValue = "#Y{N2}" });
                chtDesempenhoProcesso1.AddChartSeries(new Telerik.Charting.ChartSeries() { Name = "Parents", DataYColumn = "Parents", DefaultLabelValue = "#Y{N2}" });
                chtDesempenhoProcesso1.AddChartSeries(new Telerik.Charting.ChartSeries() { Name = "Total", DataYColumn = "Total", DefaultLabelValue = "#Y{N2}" });

            chtDesempenhoProcesso1.Series[0].Appearance.LabelAppearance.RotationAngle = -90;
            chtDesempenhoProcesso1.Series[1].Appearance.LabelAppearance.RotationAngle = -90;
            chtDesempenhoProcesso1.Series[2].Appearance.LabelAppearance.RotationAngle = -90;
            chtDesempenhoProcesso1.Series[3].Appearance.LabelAppearance.RotationAngle = -90;
            chtDesempenhoProcesso1.Series[4].Appearance.LabelAppearance.RotationAngle = -90;
            chtDesempenhoProcesso1.Series[5].Appearance.LabelAppearance.RotationAngle = -90;

            chtDesempenhoProcesso1.DataSource = dtbSourceFinal;
            chtDesempenhoProcesso1.DataBind();

        }
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 18 Feb 2014 Link to this post

    Hello Adler,

    Creating a custom skin from an existing one is also a reliable solution. More information on the matter is available in RadChart - custom skin forum thread.

    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.
  6. Adler
    Adler avatar
    10 posts
    Member since:
    Feb 2014

    Posted 08 Sep 2014 Link to this post

    I am try create a custom skin, but skin not change.

    Where i take skin of Telerik Chart, i need same exemple SkinID="Telerik", only
    change Serie[0] to Red and Serie[1] to Yellow, the others series can be the same.

    No exist anything more easy to only change color of Legend?


    I put this and change color of my Serie, i wanna that Legend change to same color.

            ChartSeriesItem item = chtSistema.Series[0].Items[0];
            item.Appearance.FillStyle.MainColor = System.Drawing.Color.Red;
            item.Appearance.FillStyle.SecondColor = System.Drawing.Color.Red;
            item.Appearance.Shadow.Distance = 155;
            item.Appearance.Border.Color = System.Drawing.Color.Red;

    thx
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 11 Sep 2014 Link to this post

    Hello Adler,

    You can use the following code:
    C#:
    protected void RadChart1_BeforeLayout(object sender, EventArgs e)
    {
        ChartSeriesItem item = chtSistema.Series[0].Items[0];
        item.Appearance.FillStyle.MainColor = System.Drawing.Color.Red;
        item.Appearance.FillStyle.SecondColor = System.Drawing.Color.Red;
        item.Appearance.Shadow.Distance = 155;
        item.Appearance.Border.Color = System.Drawing.Color.Red;
     
        chtSistema.Legend.Items[0].Appearance.FillStyle.MainColor = System.Drawing.Color.Red;
        chtSistema.Legend.Items[0].Appearance.FillStyle.SecondColor = System.Drawing.Color.Red;
        chtSistema.Legend.Items[0].Marker.Appearance.FillStyle.MainColor = System.Drawing.Color.Blue;
        chtSistema.Legend.Items[0].Marker.Appearance.FillStyle.SecondColor = System.Drawing.Color.Blue;
    }

    ASPX:
    <telerik:RadChart ID="chtSistema" runat="server" Height="400px" Width="600px" OnBeforeLayout="RadChart1_BeforeLayout">
        <Series>
            <telerik:ChartSeries Type="Bar" Name="Series 1">
                <Items>
                    <telerik:ChartSeriesItem YValue="30">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="10">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="20">
                    </telerik:ChartSeriesItem>
                </Items>
            </telerik:ChartSeries>
            <telerik:ChartSeries Type="Bar" Name="Series 2">
                <Items>
                    <telerik:ChartSeriesItem YValue="40">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="20">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="10">
                    </telerik:ChartSeriesItem>
                </Items>
            </telerik:ChartSeries>
        </Series>
        <PlotArea>
            <XAxis AutoScale="false">
                <Items>
                    <telerik:ChartAxisItem TextBlock-Text="item 1"></telerik:ChartAxisItem>
                    <telerik:ChartAxisItem TextBlock-Text="item 2"></telerik:ChartAxisItem>
                    <telerik:ChartAxisItem TextBlock-Text="item 3"></telerik:ChartAxisItem>
                </Items>
            </XAxis>
        </PlotArea>
    </telerik:RadChart>



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017