Adjust the gap between the x-axis points (MS.Net Chart Controls, Column Chart)

I have a column chart with several rows, each of which contains several points. The columns are currently touching each other. I want to force a gap between each column. How can I achieve this?

I found that using PointWidth ( Chart1.Series[seriesName]["PointWidth"] = (0.6).ToString(); ) gives me a separation between groups of x values, but not between each point in a separate group (which I need ) Using an empty separation series as suggested elsewhere does not solve the problem.

Current chart

I am using .Net 4, VS 2010, a web application. My chart code follows:

 using System; using System.Collections.Generic; using System.Drawing; using System.Linq; using System.Web.UI; using System.Web.UI.DataVisualization.Charting; namespace WebApplication1 { public partial class _Default : Page { protected void Page_Load(object sender, EventArgs e) { Chart1.ChartAreas.Add("Default"); Chart1.ChartAreas["Default"].BackColor = Color.White; Chart1.ChartAreas["Default"].BackSecondaryColor = Color.AliceBlue; Chart1.ChartAreas["Default"].BackGradientStyle = GradientStyle.TopBottom; Chart1.BackColor = Color.AliceBlue; Chart1.BackSecondaryColor = Color.White; Chart1.BackGradientStyle = GradientStyle.TopBottom; Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss; var colors = new List<Color>(GetSystemColors().Where(c=>c.Name.StartsWith("Dark"))); var rng = new Random(); var start = rng.Next(0, colors.Count - 1); for (var c = start; c < start + 6; c++) { var color = colors[c % colors.Count]; Chart1.Series.Add(color.Name); Chart1.Series[color.Name].BorderColor = color; Chart1.Series[color.Name].BorderWidth = 1; Chart1.Series[color.Name].Color = Color.FromArgb((int)(255 * .7), color); Chart1.Series[color.Name].BackSecondaryColor = Color.White; Chart1.Series[color.Name].BackGradientStyle = GradientStyle.TopBottom; for (var year = DateTime.Now.AddYears(-5).Year; year < DateTime.Now.Year; year++) Chart1.Series[color.Name].Points.Add(new DataPoint(year, rng.Next(0, 20))); Chart1.Series[color.Name]["PointWidth"] = (0.6).ToString(); //Chart1.Series.Add("Spacer:" + color.Name); //Chart1.Series["Spacer:" + color.Name]["PointWidth"] = (0.6).ToString(); } Chart1.Legends.Add("Default"); } static IEnumerable<Color> GetSystemColors() { Type type = typeof(Color); return type.GetProperties().Where(info => info.PropertyType == type).Select(info => (Color)info.GetValue(null, null)); } } } 
+5
c # data-visualization mschart
source share
2 answers

I had my own work of the devil, which reproduced your situation. I wanted to help because I thought I could learn something, but I need your markup or, even better, the whole solution! I tried "Error executing child request for ChartImg.axd" when I tried a simple page with a chart. I found that I need to add a handler to the config. Then I fought for the inability to load the System.Web.DataVisualization assembly, because the handler element that I copied referred to the DataVisualization 3.5 assembly, so I changed it to 4.0 and finally saw a graph. What a job it was!

The reason your spacer series doesn't create a gap is because there are no values โ€‹โ€‹in this series. Notice the last two lines of code below, which add null values โ€‹โ€‹to the separation series. This creates the desired gap between the other series, but you will also find the spacer series indicated in the legend if you have one, which is at least ugly.

  for (var c = start; c < start + 6; c++) { var color = colors[c % colors.Count]; var seriesName = "Series "+ c;//color.Name); Chart1.Series.Add(seriesName); Chart1.Series[seriesName].BorderColor = color; Chart1.Series[seriesName].BorderWidth = 1; Chart1.Series[seriesName].Color = Color.FromArgb((int)(255 * .7), color); Chart1.Series[seriesName].BackSecondaryColor = Color.FromArgb((int)(255 * .2), color); Chart1.Series[seriesName].BackGradientStyle = GradientStyle.TopBottom; for (var year = DateTime.Now.AddYears(-5).Year; year < DateTime.Now.Year; year++) Chart1.Series[seriesName].Points.Add(new DataPoint(year, rng.Next(0, 20))); Chart1.Series[seriesName]["PointWidth"] = (0.6).ToString(); seriesName = "Spacer:" + seriesName; Chart1.Series.Add(seriesName); Chart1.Series[seriesName]["PointWidth"] = (0.6).ToString(); for (var year = DateTime.Now.AddYears(-5).Year; year < DateTime.Now.Year; year++) Chart1.Series[seriesName].Points.Add(new DataPoint(year, 0)); } 

You can set the legend text to a space (NB. The empty line is ignored, and the legend text is not set) as follows, but the legend will still display these dividing rows.

  Chart1.Series[seriesName].LegendText = " "; 

If you are lucky, you do not need to show the legend, or you can set the spacer colors with the same color as the legend background, and the legend text in spaces. This leads to a double interval in the Legend, which is likely to be acceptable.

+7
source share

you can control whether the series appears in the legend by setting the value "IsVisibleInLegend" to false

0
source share

All Articles