Different colors for each item in the same serie?

[namhuan243]

Pls show me how to achieve that in Bar chart as all the bars in the same serie always have  the same color. It can be done automatically in Pie chart but I cannot figure out how to do that in Bar chart apart from manually assigned colors to every single item.

Thanks in advance

[Giuseppe]

Hello namhuan243,

This behavior is by design -- all bars within the same chart series are displayed in the same color and this behavior can be customized only manually by assigning different fill to the bar series items. The automatic behavior of the pie chart is special-cased in this respect (each slice displayed in different color automatically) as otherwise the pie chart would not display a meaningful graphic.


Regards,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[dargor]

Hello Manuel,

You are right Rad Chart will auto assign different colors for each item. However if there are many items then colors are repeated. Is there any way to avoid this? How can I manually change the color otherwise?

Thanks

Mario

[Giuseppe]

Hi dargor,

You can create custom palettes and assign as many different colors to the pies as you wish like this:

<telerik:RadChart ID="RadChart1" runat="server" SeriesPalette="CustomPalette1">
    <CustomPalettes>
        <telerik:Palette Name="CustomPalette1">
            <Items>
                <telerik:PaletteItem MainColor="Aqua"></telerik:PaletteItem>
                <telerik:PaletteItem MainColor="Aqua"></telerik:PaletteItem>
                <telerik:PaletteItem MainColor="Aqua"></telerik:PaletteItem>
                <telerik:PaletteItem MainColor="Aqua"></telerik:PaletteItem>
                <telerik:PaletteItem MainColor="Aqua"></telerik:PaletteItem>
                <telerik:PaletteItem MainColor="Aqua"></telerik:PaletteItem>
                <telerik:PaletteItem MainColor="Red"></telerik:PaletteItem>
                <telerik:PaletteItem MainColor="Aqua"></telerik:PaletteItem>
                <telerik:PaletteItem MainColor="Pink"></telerik:PaletteItem>
                <telerik:PaletteItem MainColor="Green"></telerik:PaletteItem>
                <telerik:PaletteItem MainColor="Yellow"></telerik:PaletteItem>
                <telerik:PaletteItem MainColor="Gray"></telerik:PaletteItem>
                <telerik:PaletteItem MainColor="Cyan"></telerik:PaletteItem>
            </Items>
        </telerik:Palette>
    </CustomPalettes>
    <Series>
        <telerik:ChartSeries Type="Pie">
            <Items>
                <telerik:ChartSeriesItem YValue="10" />
                <telerik:ChartSeriesItem YValue="10" />
                <telerik:ChartSeriesItem YValue="10" />
                <telerik:ChartSeriesItem YValue="20" />
                <telerik:ChartSeriesItem YValue="5" />
                <telerik:ChartSeriesItem YValue="5" />
                <telerik:ChartSeriesItem YValue="10" />
                <telerik:ChartSeriesItem YValue="5" />
                <telerik:ChartSeriesItem YValue="5" />
                <telerik:ChartSeriesItem YValue="5" />
                <telerik:ChartSeriesItem YValue="5" />
                <telerik:ChartSeriesItem YValue="10" />
            </Items>
        </telerik:ChartSeries>
    </Series>
</telerik:RadChart>

You can use the same approach from the code-behind as well.


Greetings,
Manuel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Jay]

hi,

can you tell me how to achieve this n Android platform.
i want to change different color  for each bar in bar series .

regards,
jay

[Danail Vasilev]

Hello Jay,

The provided code is supposed to work in all of the supported browsers by Telerik UI controls. If you are having some issues on this regard please provide more details.

I can also suggest that you try the newer RadHtmlChart control and not the obsoleted RadChart one.


Regards,
Danail Vasilev
Telerik