Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Chart > Stacked Bar Chart Alignment

• Michael

  Posted on Jan 27, 2012 (permalink)

  Reference the attached image.  The XAxis labels are perfectly centered between the major grid lines however the series items (as stacked bar chart) are not.  I've seen numerous examples within the help documentation of the stacked bar chart showing the bars centered between the major grid lines as well as the labels but without the markup for it there is no way to see how it was done.  Can someone please tell me how to get this aligned properly (what property/attribute sets it) and what, if any, related properties/attributes need to be set to (i.e. auto-layout enabled or disabled, auto-scale - true or false, etc.).

  Attached files

  • StackedBarChartAlignment.png

  Reply

• Yavor Yavor

  Posted on Jan 31, 2012 (permalink)

  Hello Michael,

  Bar series are most properly displayed using categories. For example if you have 4 categories (A, B, C and D) and you want to map 4 values to them you can do something like this:

  protected void Page_Load(object sender, EventArgs e)

  {

      var data = new List<Tuple<string, double>>()

      {

          new Tuple<string, double>("A", 12),

          new Tuple<string, double>("B", 22),

          new Tuple<string, double>("C", 17),

          new Tuple<string, double>("D", 27),

      };

      this.chart1.DataSource = data;

      this.chart1.PlotArea.XAxis.DataLabelsColumn = "Item1";

      this.chart1.DataManager.ValuesYColumns = new string[] { "Item2" };

      this.chart1.DataBind();

  }

  
  You can also achieve the same effect by adding your data manually. Here is some code:
  

  protected void Page_Load(object sender, EventArgs e)

  {

      this.chart1.PlotArea.XAxis.AutoScale = false;

      this.chart1.PlotArea.XAxis.AddItem("A");

      this.chart1.PlotArea.XAxis.AddItem("B");

      this.chart1.PlotArea.XAxis.AddItem("C");

      this.chart1.PlotArea.XAxis.AddItem("D");

      var series = new Telerik.Charting.ChartSeries();

      series.AddItem(12);

      series.AddItem(22);

      series.AddItem(17);

      series.AddItem(27);

      this.chart1.Series.Add(series);

  }

  
  Hope this helps! Greetings,
  Yavor
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Attached files

  • chartUsingCategories.PNG

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Chart > Stacked Bar Chart Alignment