How to Create a Sparkline Chart in ASP.NET

In this post, I’ll show how to create a sparkline chart in ASP.NET using the Microsoft chart control.  Sparklines aren’t supported natively, but they can be implemented easily by stripping the chart down to its basic series.

Try dropping a new chart onto the Visual Studio design surface and use the code below as a starting point to generate a sparkline similar to the one shown above.

using System.Web.UI.DataVisualization.Charting
...

protected void Page_Load(object sender, EventArgs e)
 {
 // Generate random data
 Random rand = new Random();
 double high = rand.NextDouble() * 40;

 // Assign the random number to the chart to create 35 points
 for (int x = 0; x < 35; x++)
 Chart2.Series[0].Points.AddXY(DateTime.Now.AddDays(x), rand.Next(100, 200));

 // Start hiding both sets of axes, labels, gridlines and tick marks
 Chart2.ChartAreas[0].AxisX.LabelStyle.Enabled = false;
 Chart2.ChartAreas[0].AxisY.LabelStyle.Enabled = false;
 Chart2.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
 Chart2.ChartAreas[0].AxisY.MajorGrid.Enabled = false;
 Chart2.ChartAreas[0].AxisX.MajorTickMark.Enabled = false;
 Chart2.ChartAreas[0].AxisY.MajorTickMark.Enabled = false;
 Chart2.ChartAreas[0].AxisX.LineWidth = 0;
 Chart2.ChartAreas[0].AxisY.LineWidth = 0;

 // Sparklines use the 'Spline' chart type to show a smoother trend with a line chart
 Chart2.Series[0].ChartType = SeriesChartType.Spline;

 // Since the line is the only thing you see on the chart, you might want to
 // increase its width.  Interestingly, you need to set the BorderWidth property
 // in order to accomplish that.
 Chart2.Series[0].BorderWidth = 2;

 // Re-adjust the size of the chart to reduce unnecessary white space
 Chart2.Width = 400;
 Chart2.Height = 100;
 }

I see why sparklines are popular but frankly, I’m not a big fan of them.  Charts should have context to understand what the trend line really means.  The “fast food” approach to data visualization will only lead to more confusion in the long run.  Finding easier ways to understand data is cool, but sometimes I feel that we’re just getting lazy as dashboard writers, compromising the difficulties of scientifically analyzing data in favor of quickly finding a pattern.  I can appreciate what Tufte was trying to get at with sparklines, but keep in mind that his use case will not work in all cases.

Anyway, rant over – enjoy your sparklines.  🙂  Feel free to post questions if this is unclear.