Series Color

[Jones]

Hi,

I am binding PIE chart programmatically. Kindly tell me how to change the series item color? And how to change the background color of the chart as white? Because when I set <FillStyle MainColor="#FFFFFF"  /> is not working. 

Regards,

Jones

[Giuseppe]

Hello Jones,

You can achieve the desired functionality by handling the ItemDataBound event like this:

private static List<Color> Colors
{
    get
    {
        List<Color> colors = new List<Color>();
        colors.Add(Color.Red);
        colors.Add(Color.Green);
        colors.Add(Color.Blue);
        colors.Add(Color.Yellow);
        colors.Add(Color.Orange);

        return colors;
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    List<ChartData> data = new List<ChartData>();
    data.Add(new ChartData(847, "Mapped"));
    data.Add(new ChartData(2157, "Not Mapped"));

    RadChart1.Appearance.FillStyle.MainColor = Color.White;

    RadChart1.PlotArea.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
    RadChart1.PlotArea.Appearance.FillStyle.MainColor = Color.White;

    RadChart1.ItemDataBound += new EventHandler<Telerik.Charting.ChartItemDataBoundEventArgs>(RadChart1_ItemDataBound);

    RadChart1.DefaultType = Telerik.Charting.ChartSeriesType.Pie;
    RadChart1.DataSource = data;
    RadChart1.DataBind();
}

private void RadChart1_ItemDataBound(object sender, Telerik.Charting.ChartItemDataBoundEventArgs e)
{
    e.SeriesItem.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;
    e.SeriesItem.Appearance.FillStyle.MainColor = Colors[e.SeriesItem.Index];
}

public class ChartData
{
    private double data;
    private string label;

    public ChartData(double data, string label)
    {
        this.Data = data;
        this.Label = label;
    }

    public double Data
    {
        get
        {
            return this.data;
        }
        set
        {
            this.data = value;
        }
    }

    public string Label
    {
        get
        {
            return this.label;
        }
        set
        {
            this.label = value;
        }
    }
}

Greetings,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jones]

Hi Manuel,

Thanks.

Regards,

Jones.

[rtk]

Is it possible to get the chart.serie color. I would like to built my own legend.

John

[Giuseppe]

Hello brajoh,

Unfortunately it is not possible to get the skin color applied to a given chart series. If you would like to achieve this functionality you would need to use a custom palette like this:

ASPX:

<telerik:RadChart ID="RadChart1" runat="server" SeriesPalette="Palette1">
    <CustomPalettes>
        <telerik:Palette Name="Palette1">
            <Items>
                <telerik:PaletteItem MainColor="Red" SecondColor="White" />
                <telerik:PaletteItem MainColor="Green" SecondColor="White" />
                <telerik:PaletteItem MainColor="Blue" SecondColor="White" />
            </Items>
        </telerik:Palette>
    </CustomPalettes>
</telerik:RadChart>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        RadChart1.DataSource = new int[] { 12, 4, 10, 5, 16 };
        RadChart1.DataBind();

        // You can get the applied colors like this:
        // Color mainColor = RadChart1.CustomPalettes[0].Items[0].MainColor;
        // Color secondColor = RadChart1.CustomPalettes[0].Items[0].SecondColor;
    }
}

Hope this helps.


Sincerely yours,
Manuel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Peter]

Hi Telerik!

I have a similar problem except that I am not DataBinding. I create all the SeriesItems before adding them to Series, like so: 

chartSzenarioAnalysis.CreateSeries(_title, _color,

Color.Black, _chartStyle);

I tried some defining the Color for each ChartSeriesItem that I create like so: 

 

ChartSeriesItem

 

item = new ChartSeriesItem(_it.Value);

 

item.Appearance.FillStyle.MainColor = _color;

item.Appearance.FillStyle.SecondColor =

Color.White;

 

item.Appearance.FillStyle.FillType = Telerik.Charting.Styles.

FillType.Solid;

 

 

return item;

 

 

but nothing worked so far, the colors stay the same.

The reason I need it is because I need one BarSeries and one LineSeries to be the same color! So I'm setting the colors for both Series to be the same. Ist this possible? Any ideas on this?

[Peter]

Whoops!

Found it! I had 

SkinsOverrideStyles

 

="true"

set, which obviously caused this behaviour. So, make sure SkinsOverrideStyles is set to false if you plan on doing just that!

[John Giblin]

I followed this and it worked for the most part.

What I was trying to do is for some selected values, have a color assigned to it.  Otherwise just do the default. The problem I had was that the colors I assigned looked different then that of other colors (the shading).  I tried to set the second color to black,  but that is not what the other bars are doing. It is just getting darker.  and the border is using the darker color.

Also, the data table is not changing the colors. I am not displaying the legend, But I assume that it is doing the same thing there.


To summarize what I am looking for is:
1) Set the second color to match the default way of assigning the color
2) Set the border to the second color.
3) have that color be reflected in the datatable and legend
4) also not have the colors repeat if I use it.

[Vladimir Milev]

Hello John Giblin,

All gradients in the chart are custom/hand made - i.e. they are not generated using an algorithm based off a main color. You will either need to try and find similar looking gradients, or simply use solid fill for all your bars, this will eliminate the gradient problem.

Greetings,
Vladimir Milev
the Telerik team

[John Giblin]

ok.  I have no problem with that.  But I would like the datatable and legend to match colors.  I am not sure why it would be different

[Vladimir Milev]

Hello John Giblin,

I just tested the following on my pc and it seems to be working as expected:

<telerik:RadChart ID="RadChart1" runat="server" Width="861px">
    <Series>
    <telerik:ChartSeries Name="Series 1">
        <Appearance Border-Width="0">
        <FillStyle MainColor="Red" SecondColor="Green">
        </FillStyle>
        </Appearance>
        <Items>
        <telerik:ChartSeriesItem Name="Item 1" YValue="4">
        </telerik:ChartSeriesItem>
        <telerik:ChartSeriesItem Name="Item 2" YValue="3">
        </telerik:ChartSeriesItem>
        <telerik:ChartSeriesItem Name="Item 3" YValue="5">
        </telerik:ChartSeriesItem>
        </Items>
    </telerik:ChartSeries>
    <telerik:ChartSeries Name="Series 2">
        <Appearance Border-Width="0">
        <FillStyle MainColor="Blue" SecondColor="Yellow">
        </FillStyle>
        </Appearance>
        <Items>
        <telerik:ChartSeriesItem Name="Item 1" YValue="3">
        </telerik:ChartSeriesItem>
        <telerik:ChartSeriesItem Name="Item 2" YValue="3">
        </telerik:ChartSeriesItem>
        <telerik:ChartSeriesItem Name="Item 3" YValue="3">
        </telerik:ChartSeriesItem>
        </Items>
    </telerik:ChartSeries>
    </Series>
    <PlotArea>
    <DataTable Visible="True">
    </DataTable>
    </PlotArea>
</telerik:RadChart>

Best wishes,
Vladimir Milev
the Telerik team