ASP.NET Chart Styling the Axes

You can customize the x or y axis of the chart component through the Axes items:

<Axes>
    <shield:ChartAxisX 
        CategoricalValues="Jan, Feb, Mar, Apr, May, Jun"></shield:ChartAxisX>
    <shield:ChartAxisY>
        <Title Text="Visitor statistics"></Title>
    </shield:ChartAxisY>
</Axes>

The customizable elements along the x and y axes are:

• The tick text

This group of settings allows manipulation of the text along the ticks of the axes. These settings are available for both x and y axes via the AxisTickText object.

<Axes>
    <shield:ChartAxisX>
        <AxisTickText TextAngle="45">
            <Style Bold="true" Color="Green" FontSize="20px" />
        </AxisTickText>
    </shield:ChartAxisX>
</Axes>

• Axis width and color

These settings are controlled through the DrawColor for x Axis, DrawWidth for x Axis, DrawColor for Y Axis and DrawWidth for Y Axis:

<shield:ChartAxisX DrawColor="Red" DrawWidth="5">
</shield:ChartAxisX>

• PlotStrip Color

It can be adjusted through as shown here for the x axis, and here for the y axis:

<shield:ChartAxisX PlotStripColor="Blue" PlotStripDashStyle="LongDashDot">
</shield:ChartAxisX>

• Minor Plotstrip

Its settings can also be adjusted. This following code snippet shows the properties for x axis, and this one for the y axis.

<Axes>
  <shield:ChartAxisX MinorPlotStripColor="Blue" MinorPlotStripDashStyle="LongDashDot">
  </shield:ChartAxisX>
</Axes>

• The ticks and minor ticks

The ticks and minor ticks’ appearance can also be changed. They can be changed directly from ChartAxisX and ChartAxisY corresponding properties:

<Axes>
    <shield:ChartAxisX TicksColor="Red" TicksWidth="2" MinorTicksColor="Green" MinorTicksHeight="10"></shield:ChartAxisX>
</Axes>