Ugly drawing of MS asp.net radar chart

Question

I'm using the MS asp.net charting controls. And I'm using the radar chart to draw some values, but for some reason, the lines of the X-axis doesn't really meet in the middle.

I have set the LineWidth = 1, but the line still takes like 2 pixels and some of the markers are totally off, or maybe it's the line that's totally off. Maybe my text is a little bit off as well, so please see picture and hopefully you'll understand my problem. =)

enter image description here

Code that generates the chart:

// Populate series data
Chart chart1 = new Chart();
chart1.ChartAreas.Add(new ChartArea("ChartArea1"));

chart1.Height = new Unit(380);
chart1.Width = new Unit(880);
//chart1.AntiAliasing = AntiAliasingStyles.Graphics;  
//chart1.BackColor = Color.Transparent;
chart1.Customize += new EventHandler(Chart_Customize);

// Show as 3D
chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = false;
chart1.ChartAreas["ChartArea1"].AxisY.IntervalAutoMode
    = IntervalAutoMode.FixedCount;
chart1.ChartAreas["ChartArea1"].AxisY.Interval = 10;
chart1.ChartAreas["ChartArea1"].AxisY.Maximum = 100;

chart1.ChartAreas["ChartArea1"].AxisY.IsReversed = true;

chart1.ChartAreas[0].AxisY.LineWidth = 1;
chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Gray;
chart1.ChartAreas[0].AxisY.LineColor = Color.Gray;
chart1.ChartAreas[0].AxisY.MajorTickMark.Enabled = false;

List<string> names = new List<string>();
int namecounter = 1;
foreach (var p in Model.Participants)
{
  if (SessionHandle.ShowNamesInDiagrams)
    names.Add(p.Person.Name);
  else
    names.Add(namecounter.ToString());
  namecounter++;
}

#region firstresult
if (SessionHandle.ShowFirstResult)
{
  chart1.Series.Add(new Series("FirstResult"));
  List<double> firstresult = new List<double>();
  foreach (var p in Model.Participants)
  {
    var resultSummary = from r in Model.ResultSummary
                        where r.userID == p.ParentID && Model
                            .Modules
                            .Where(x => x.hasResult)
                            .ToList()
                            .Exists(x => x.ID == r.moduleID)
                        select r;
    firstresult.Add(resultSummary.Sum(x => x.scorePercent)
                    / Model.Modules.Where(x => x.hasResult).Count());
  }

  chart1.Series["FirstResult"].Points.DataBindXY(names, firstresult);
  // Set radar chart type
  chart1.Series["FirstResult"].ChartType = SeriesChartType.Radar;

  // Set radar chart style (Area, Line or Marker)
  chart1.Series["FirstResult"]["RadarDrawingStyle"] = "Marker";
  chart1.Series["FirstResult"].Color = Color.DarkBlue;
  chart1.Series["FirstResult"].MarkerImage
      = Url.Content("~/Content/Images/firstresult.png");

  // Set circular area drawing style (Circle or Polygon)
  chart1.Series["FirstResult"]["AreaDrawingStyle"] = "Circle";

  // Set labels style (Auto, Horizontal, Circular or Radial)
  chart1.Series["FirstResult"]["CircularLabelsStyle"] = "Horizontal";
}
#endregion

Can you post the code that generates the chart, and the chart definition? — Mitchel Sellers
I hope this helps: [stackoverflow.com/questions/5013008/… [1]: stackoverflow.com/questions/5013008/… — c0D3l0g1c
Try this: [1]: stackoverflow.com/questions/5013008/… Hope this helps :) — tony b
We use MS asp.net charts when compiling in Mono, which our preferred charting solution will not compile in. The results are ugly, unfortunately, and we can't make them as consistent or appealing as any other charting solutions we've used. If the looks are important, I might suggest checking out highcharts, d3.js, or dundas. — cazlab
cazlab is on the right track here - .NET Charts leave much to be desired. HighCharts or even telerik if you have it. — Wjdavis5

Mark Feldman Mark Feldman · Accepted Answer · 2013-12-07T20:56:10

WPF coordinates refer to the center of the pixel, not the corners, so try adding 0.5 to all your coordinates. To show this is the case consider the following xaml:

<Canvas>
<Line X1="50" Y1="50" X2="100" Y2="50" Stroke="Black" StrokeThickness="1" />
<Line X1="50" Y1="50" X2="50" Y2="100" Stroke="Black" StrokeThickness="1" />
<Line X1="50" Y1="50" X2="100" Y2="100" Stroke="Black" StrokeThickness="1" />
</Canvas>

Here it is rendered normally and then with a 0.5 pixel offset applied to each coordinate:

Xaml lines

Ugly drawing of MS asp.net radar chart

1 Answers