Available for: Windows 8.1 | Windows Phone 8.1

Display Horizontal Bar Chart

RadChart allows a series to be rendered vertically as well as horizontally. A series position depends on the axes that you define. Thus in order to display a bar series horizontally, you need to define the category axis as a vertical axis, rather than a horizontal axis. Define a Bar Chart with a Horizontal Series

The following example demonstrates how to create a RadCartesianChart with horizontal BarSeries.Chart-How To-Horizontal Bar Chart

Create a bar chart with swapped axes.

        <telerik:RadCartesianChart>
            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis/>
            </telerik:RadCartesianChart.HorizontalAxis>
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:CategoricalAxis/>
            </telerik:RadCartesianChart.VerticalAxis>
            <telerik:BarSeries CombineMode="Cluster" ItemsSource="{Binding Data1}">
                <telerik:BarSeries.ValueBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="Value"/>
                </telerik:BarSeries.ValueBinding>
                <telerik:BarSeries.CategoryBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="Category"/>
                </telerik:BarSeries.CategoryBinding>
            </telerik:BarSeries>
            <telerik:BarSeries CombineMode="Cluster" ItemsSource="{Binding Data2}">
                <telerik:BarSeries.ValueBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="Value"/>
                </telerik:BarSeries.ValueBinding>
                <telerik:BarSeries.CategoryBinding>
                    <telerik:PropertyNameDataPointBinding PropertyName="Category"/>
                </telerik:BarSeries.CategoryBinding>
            </telerik:BarSeries>
        </telerik:RadCartesianChart>

Create a sample class for data:

    public class SampleData
    {
        public double Value { get; set; }
        public string Category { get; set; }
    }

Create the view model:

    public class SampleViewModel
    {
        private Random r = new Random();

        public IEnumerable Data1 { get; private set; }
        public IEnumerable Data2 { get; private set; }


        public SampleViewModel()
        {
            this.Data1 = (from c in Enumerable.Range(0, 10)
                          select new SampleData
                          {
                              Category = "Category " + c,
                              Value = r.Next(10, 100)
                          }).ToList();

            this.Data2 = (from c in Enumerable.Range(0, 10)
                          select new SampleData
                          {
                              Category = "Category " + c,
                              Value = r.Next(10, 100)
                          }).ToList();
        }
    }

Set the chart data context.

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            this.DataContext = new SampleViewModel();
        }