Chart: merge SeriesPalettes

[Rachel Carvalho]

Hi all!

I'm designing a pie chart and would like to know if it's possible to "merge" two SeriesPalettes options (I liked some stuff from both) and also, would like to change their color order.

Is there anyway to get the appearance settings it sets when I choose them? If I had to "re-implement" them by hand, I believe I would have to set a whole lot of properties and "guess" the values for the colors.

Thanks in advance.

Rachel

[Ves]

Hello Rachel,

Indeed, you will need to add the custom palette manually:

<telerik:RadChart ID="RadChart1" runat="server" SeriesOrientation="Horizontal" SeriesPalette="MyPalette">
            <CustomPalettes>
                <telerik:Palette Name="MyPalette">
                    <Items>
                        <telerik:PaletteItem MainColor="Red" SecondColor="Green">
                        </telerik:PaletteItem>
                        <telerik:PaletteItem MainColor="Orange" SecondColor="Blue">
                        </telerik:PaletteItem>
                        .......
                    </Items>
                </telerik:Palette>
            </CustomPalettes>

Let us know which chart palettes you need, so we can provide you with the colors.

Regards,
Ves
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.

[Rachel Carvalho]

Oh, sorry, I wasn't clear enough... I'm not using a RadChart. I'm designing a report that contains a pie chart (as in Telerik.Reporting.Chart).

Anyway, the values I would like to merge from the SeriesPalette property are "Ultra" and "Gradient".

Thanks for the help!

Rachel

[Ves]

Hello Rachel,

You can find the details below:

var ultraColors = new ColorBlend[] {
                        new ColorBlend(new Color[] { Color.FromArgb(255, 224, 78), Color.FromArgb(247, 204, 22), Color.FromArgb(226, 175, 3)}),
                        new ColorBlend(new Color[] { Color.FromArgb(136, 221, 246), Color.FromArgb(97, 203, 234), Color.FromArgb(59, 161, 197)}),
                        new ColorBlend(new Color[] { Color.FromArgb(177, 222, 84), Color.FromArgb(150, 209, 35), Color.FromArgb(118, 187, 10)}),
                        new ColorBlend(new Color[] { Color.FromArgb(255, 170, 78), Color.FromArgb(245, 139, 27), Color.FromArgb(201, 102, 3)}),
                        new ColorBlend(new Color[] { Color.FromArgb(243, 147, 213), Color.FromArgb(237, 111, 197), Color.FromArgb(221, 72, 174)}),
                        new ColorBlend(new Color[] { Color.FromArgb(194, 143, 236), Color.FromArgb(175, 106, 227), Color.FromArgb(153, 76, 211)})
        };
        Palette ultra = new Palette("MyUltraPalette", ultraColors);
        myChart1.CustomPalettes.Add(ultra);
        myChart1.SeriesPalette = "MyUltraPalette";


        var gradientColors = new ColorBlend[] {
                        new ColorBlend(new Color[] { Color.FromArgb(199, 243, 178), Color.FromArgb(17, 147, 7) }),
                        new ColorBlend(new Color[] { Color.FromArgb(253, 226, 0), Color.FromArgb(255, 156, 0) }),
                        new ColorBlend(new Color[] { Color.FromArgb(255, 128, 128), Color.FromArgb(192, 0, 0) }),
                        new ColorBlend(new Color[] { Color.FromArgb(128, 128, 255), Color.FromArgb(0, 0, 192) })
        };

        Palette gradient = new Palette("MyGradientPalette", gradientColors);
        myChart2.CustomPalettes.Add(gradient);
        myChart2.SeriesPalette = "MyGradientPalette";

Best regards,

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

[Rachel Carvalho]

Thanks a lot!

Rachel

[Yuvika]

Hi
Please provide me color codes for vista style.

Actaully what I want is more colors in vista style as my data is more than 6 rows and then the color starts repeating. To overcome this problem I will craete my custom pallet.

Thanks
Yuvika

[Ves]

Hello Yuvika,

The colors for Vista skin are as follows:

var vistaColors = new ColorBlend[] {
                        new ColorBlend(new Color[] { Color.FromArgb(186, 207, 141), Color.FromArgb(146, 176, 83)}),
                        new ColorBlend(new Color[] { Color.FromArgb(235, 140, 104), Color.FromArgb(214, 110, 90)}),
                        new ColorBlend(new Color[] { Color.FromArgb(129, 192, 225), Color.FromArgb(79, 129, 189)}),
                        new ColorBlend(new Color[] { Color.FromArgb(200, 182, 80), Color.FromArgb(176, 162, 83)}),
                        new ColorBlend(new Color[] { Color.FromArgb(171, 62, 29), Color.FromArgb(115, 36, 12)}),
                        new ColorBlend(new Color[] { Color.FromArgb(156, 121, 182), Color.FromArgb(127, 91, 154)})
                        new ColorBlend(new Color[] { Color.FromArgb(186, 207, 141), Color.FromArgb( 146, 176, 83)})
        };

Regards,
Ves
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Matt Place]

is there any chance you could provide the color codes for the "Colorful" palette? Or is there an easy way for us to access these on our own?

[Ves]

Hi Matt,

I am afraid there is no easy way to access these values from code. Still, you can retrieve them from the control source code in RadControlsAjaxSource\Telerik.Web.UI\ChartingEngine\Styles\Skins\ChartSkinsCollection.resx file. Specifically, for Colorful it goes like this:

<ChartSeries>
      <Appearance>
        <Border Color="DimGray" />
        <FillStyle MainColor="255, 186, 74" SecondColor="255, 244, 227" />
      </Appearance>
    </ChartSeries>
    <ChartSeries>
      <Appearance>
        <Border Color="DimGray" />
        <FillStyle MainColor="21, 197, 22" SecondColor="218, 246, 218" />
      </Appearance>
    </ChartSeries>
    <ChartSeries>
      <Appearance>
        <Border Color="DimGray" />
        <FillStyle MainColor="255, 91, 0" SecondColor="255, 229, 215" />
      </Appearance>
    </ChartSeries>
    <ChartSeries>
      <Appearance>
        <Border Color="DimGray" />
        <FillStyle MainColor="Blue" SecondColor="192, 192, 255" />
      </Appearance>
    </ChartSeries>
    <ChartSeries>
      <Appearance>
        <Border Color="DimGray" />
        <FillStyle MainColor="Gray" SecondColor="WhiteSmoke" />
      </Appearance>
    </ChartSeries>
    <ChartSeries>
      <Appearance>
        <Border Color="DimGray" />
        <FillStyle MainColor="Yellow" SecondColor="255, 255, 192" />
      </Appearance>
    </ChartSeries>

Best regards,
Ves
the Telerik team