Thursday, September 30, 2010

Chart Control - Showing all X Axis Lines (Vertical Lines)

By default when you plot more than 9 DataPoints on a chart of certain types (such as Line, Spline, etc.) the X axis will drop its labels and the X Axis Lines will disappear with them. Let's take a look:
Chart with 9 DataPoints:

Chart with 10 DataPoints:


How do I show all the X Axis labels?

You want to set the Interval property to "1".
Here is the HTML:
   1:  <asp:Chart ID="chtExample" runat="server" Height="390px" Width="470px">
   2:      <Series>
   3:          <asp:Series ChartType="Line" Name="Series1" XValueType="Date" Color="DarkBlue" BorderWidth="3">
   4:              <Points>
   5:                  <asp:DataPoint YValues="1" AxisLabel="7/31/2010" />
   6:                  <asp:DataPoint YValues="4" AxisLabel="8/7/2010" />
   7:                  <asp:DataPoint YValues="3" AxisLabel="8/14/2010" />
   8:                  <asp:DataPoint YValues="4" AxisLabel="8/21/2010" />
   9:                  <asp:DataPoint YValues="2" AxisLabel="8/28/2010" />
  10:                  <asp:DataPoint YValues="10" AxisLabel="9/4/2010" />
  11:                  <asp:DataPoint YValues="11" AxisLabel="9/11/2010" />
  12:                  <asp:DataPoint YValues="10" AxisLabel="9/18/2010" />
  13:                  <asp:DataPoint YValues="12" AxisLabel="9/25/2010" />
  14:                  <asp:DataPoint YValues="13" AxisLabel="10/2/2010" />
  15:              </Points>
  16:          </asp:Series>
  17:      </Series>
  18:      <ChartAreas>
  19:          <asp:ChartArea Name="ChartArea1">
  20:              <AxisX Interval="1">
  21:              </AxisX>
  22:          </asp:ChartArea>
  23:      </ChartAreas>
  24:  </asp:Chart>
Line 20 is where you will see the Interval property being set. With that set your chart will now show all labels on the X Axis:

This took me a while to find. Hope it helps you out!
More Info: MSDN: Axis.Interval Property