This is a migrated thread and some comments may be shown as answers.

Caption for Horizontal Bar Chart

1 Answer 113 Views
Chart (Obsolete)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Deepak asked on 23 Dec 2008, 08:04 AM
I need help in implementing telerik bar chart (Horizontal). 
Chart Details : 
1. I have horizontal bar charts with bars on both the sides +Ve X Axis and -Ve X Axis. Bars are overlapping in center. i.e. I am graphically representing the negative as well as positive values.
2. Only X axis values are concerned for plottinfg the chart.
3. Bar length is nothing but the -X position in left side and +X position in right side.
4. I dont want any caption\interval on Y Axis.
5. Instead of captions\Intervals I want name of the bars e.g. Sunday, Monday.....aligned properly

Following are the Code\ Markup I am using for generating the Bar Chart. Also I have attached the screen shot of my bar chart with explanation of desired look.

1. Markup :
<telerik:RadChart Skin="Hay" ID="barChart1" runat="server" SeriesOrientation="Horizontal"  Width="600px" Height="2000px" AutoLayout="true">                                                                
                                        <PlotArea >
                                            <YAxis >                                                
                                            <XAxis ></XAxis>

2. C# Code :
A. I am creating three Arrays
a. Array containing name of each horizontal bars
b. Array containg the yValues for the Left hand Side of the Bars (-VE X Axis)
c. Array containg the yValues for the Right hand Side of the Bars (+VE X Axis)

B. I have written a method which returns RadChartSeries and takes Name of the Seies, yValues (Array), Caption for Bars (Array), Color
    private ChartSeries GetChartSeries(string titleText, string[] blockName, double[] yValues, Color color,bool displayCaption)
        ChartSeries chartSeries = new ChartSeries();
        chartSeries.Appearance.FillStyle.MainColor = color;        
        chartSeries.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Solid;                                
        chartSeries.Name = titleText;       
        chartSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;
        chartSeries.Appearance.ShowLabels = true;
        chartSeries.Appearance.LabelAppearance.Visible = true;
        chartSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName ;
        chartSeries.Appearance.LabelAppearance.LabelLocation = Telerik.Charting.Styles.StyleSeriesItemLabel.ItemLabelLocation.Auto;
        int items = blockName.Length;
        ChartSeriesItem[] chartSeriesItems = new ChartSeriesItem[items];
        for (int i = 0; i < items; i++)
            chartSeriesItems[i] = new ChartSeriesItem();            
            chartSeriesItems[i].Name = blockName[i];
                chartSeriesItems[i].Label.TextBlock.Text = blockName[i] + "(" + yValues[i].ToString() + " % )";

            //chartSeriesItems[i].Label.TextBlock.Text = yValues[i].ToString() + " %";               
            chartSeriesItems[i].YValue = yValues[i];
        return chartSeries;        

C. Now the ChartSeries obtained from above method I am adding to my Rad Chart
        barChart1.Appearance.FillStyle.MainColor = Color.White;
        barChart1.Appearance.ImageQuality = Telerik.Charting.Styles.ImageQuality.None;
        barChart1.ChartTitle.TextBlock.Text = "Original TCO = " + Math.Round(tcoBaseValue, 2).ToString();
        barChart1.Appearance.BarOverlapPercent = 100;
        barChart1.AddChartSeries(GetChartSeries("-5% Change", blockCaption, yValuesL, Color.Yellow, true));
        barChart1.AddChartSeries(GetChartSeries("+5% Change", blockCaption, yValuesR, Color.Blue, false));

D. I am getting the bar chart (Attached). I want the captions to be moved into Left most side where Graph Scale\ Intervals used to be displayed.

Thanks and Regards...
Ashish Tripathi..

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 23 Dec 2008, 02:42 PM
Hello Ashish,

By default RadChart will put values 1,2,3, etc. to X axis items (the vertical axis in this case). You can set barChart1.PlotArea.XAxis.AutoScale property to false. Now, you can manually add items to X axis and provide the text for them. Here is one possible approach:

barChart1.PlotArea.XAxis.AutoScale = false
 int items = blockName.Length; 
        for (int i = 0; i < items; i++) 
      barChart1.PlotArea.XAxis.AddItem(blockName[i] + "(" + yValues[i].ToString() + " % )"); 

Hope this helps.

Kind regards,
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Chart (Obsolete)
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question