[Solved] Can I configure Bar chart horizontally

[Suresh]

Hi,



I have used XAML  'RadCartesianChart' to create bar chart. It is cool. I have two question on this:



1. How to control the colors of the stacks plotted on the graph. It is picking from DefaultPalette. But how to specify our own color codes for each stack in the graph. Sample code would be more helpful.



2. Can I change some properties to get bar graph horizontally stacked? attached screenshot for more clarity. Can I get it? if Yes, please let me know how to get it.



Thanks,

Suresh

 

 

 

 

 

 

[Tsvyatko]

Hi Suresh,

1. In order to achieve this you can define custom chart palette For e.g.:

public static class CustomPalettes
{
    static CustomPalettes()
    {
        CreateCustomDarkPalette();
    }

    private static void CreateCustomDarkPalette()
    {
        ChartPalette palette = new ChartPalette() { Name = "CustomDark" };

        // fill
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 40, 152, 228)));
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 205, 0)));
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 60, 0)));
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 210, 202, 202)));
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 67, 67, 67)));
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 255, 156)));
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 109, 49, 255)));
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 178, 161)));
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 109, 255, 0)));
        palette.FillEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 128, 0)));

        // stroke
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 96, 194, 255)));
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 225, 122)));
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 108, 79)));
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 229, 229, 229)));
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 84, 84, 84)));
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 0, 255, 156)));
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 130, 79, 255)));
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 69, 204, 191)));
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 185, 255, 133)));
        palette.StrokeEntries.Brushes.Add(new SolidColorBrush(Color.FromArgb(255, 255, 175, 94)));

        CustomDark = palette;
    }

    public static ChartPalette CustomDark { get; private set; }
}

Then you can use it for the chart defined:

chart.Palette = CustomPalettes.CustomDark;

Alternatively, you can define it in xaml:

   <telerik:RadPieChart x:Name="chart" >
            <telerik:RadPieChart.Palette>
                <telerik:ChartPalette>
                    <telerik:ChartPalette.FillEntries>
                        <telerik:PaletteEntryCollection>
                            <SolidColorBrush Color="Green"></SolidColorBrush>
                            <SolidColorBrush Color="Gray"></SolidColorBrush>
                            <SolidColorBrush Color="Blue"></SolidColorBrush>
                            <SolidColorBrush Color="Red"></SolidColorBrush>
                        </telerik:PaletteEntryCollection>
                    </telerik:ChartPalette.FillEntries>
                    <telerik:ChartPalette.StrokeEntries>
                        <telerik:PaletteEntryCollection>
                            <SolidColorBrush Color="LightGreen"></SolidColorBrush>
                            <SolidColorBrush Color="LightGray"></SolidColorBrush>
                            <SolidColorBrush Color="LightBlue"></SolidColorBrush>
                            <SolidColorBrush Color="OrangeRed"></SolidColorBrush>
                        </telerik:PaletteEntryCollection>
                    </telerik:ChartPalette.StrokeEntries>
                </telerik:ChartPalette>
            </telerik:RadPieChart.Palette>
...

2. In order to display bars horizontally you need to switch the horizontal and vertical axes.

Let me know if you have any futher questions of issues.

All the best,
Tsvyatko
the Telerik team

[Suresh]

Thanks Tsvyatko for the reply.

I was able to swap the Axis and I got the horizontally stacked graph. Thanks!



Thanks,

Suresh

[Tsvyatko]

Hi Suresh,

 In your particular scenario you might want to setup the axes as follow:

<telerik:RadCartesianChart.HorizontalAxis>
    <telerik:LinearAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
    <telerik:CategoricalAxis/>
</telerik:RadCartesianChart.VerticalAxis>

That way the categories will be displayed in the vertical axis rendering the bars horizontally. More examples can be found in our QSF (installed by default with our controls). You can find solution shortcut on your desktop. The app is installed as a metro app.

Let us know if you have any further questionsKind regards,
Tsvyatko
the Telerik team

[Suresh]

Hi Tsvyatko,



Thanks for the reply. I got the solution for my scenario.



I don't know that is meant by QSF. I don't have any solution shortcut in my desktop. I have installed the Telerik App "World Bank Economic Statistics" which is also a Metro app, but all controls in a single page.



Are you referring to that sample or we have other samples too?



Thanks,

Suresh

[Tsvyatko]

Hello Suresh,

 it seems that you have our preview beta. We have recently released our public beta. You can download it from here - http://www.telerik.com/products/windows-metro/overview.aspx . It includes our controls as well as QSF demo app.

Please have a look and let us know if we can assist any further.

Greetings,
Tsvyatko
the Telerik team