Caption for Horizontal Bar Chart

Thread is closed for posting
2 posts, 1 answers
  1. Deepak
    Deepak avatar
    4 posts
    Member since:
    Sep 2008

    Posted 23 Dec 2008 Link to this post

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

  2. Answer
    Ves avatar
    2926 posts

    Posted 23 Dec 2008 Link to this post

    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.
Back to Top