RadChart - Change Legend of Skin

[Adler]

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..

[Danail Vasilev]

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

[Adler]

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();

    }

[Danail Vasilev]

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

[Adler]

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

[Danail Vasilev]

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