The following topic describes how to represent negative values below the ValueAxis and show positive and negative values in different colors in a Sparkline.

Step 1 of 3: Set ValueAxis property to True

Complete the following steps to represent the negative values of the data below the ValueAxis of the Sparkline control.

1. Right click the Sparkline and select Properties. In the Properties Window, set ValueAxis to True. By default the ValueAxis is set False.

   

Step 2 of 3: Set different colors for Positive and Negative values

Complete the following steps to represent positive and negative values of the data in different colors on the Sparkline:

In Design View

1. Select the control and open the C1Sparkline Tasks menu, and select SeriesList. This opens the SparklineSeries Collection Editor.    
2. Click the Add button, on the right window expand SeriesStyle >Fill>Color, and from the Color dropdown, select Blue.

3. 
   

4. Similarly, expand NegStyle>Fill>Color, and select Red to represent negative values in red.
   
   
5. 

In Source View

<cc1:C1Sparkline ID="C1Sparkline1" runat="server" ValueAxis="True" Height="50">
   <SeriesList>
      <cc1:SparklineSeries Type="column" SeriesStyle-Fill-Color="RoyalBlue"
SeriesStyle-NegStyle-Fill-Color="Red"> </cc1:SparklineSeries>
</SeriesList>
</cc1:C1Sparkline>

Step 3 of 3: Add Data to the control

In Source View

<SeriesList>
  <cc1:SparklineSeries Data="20, 40, 0, 10, 20, 25, 0, 45, 15, 0, 10, 20, 5, 

   20, -10, 0, -20, 20, 10">
  </cc1:SparklineSeries>
</SeriesList>
  

In Code

Add the following code to the Page_Load event.

To write code in C#

double[] data = {20, 40, 0, 10, 20, 25, 0, 45, 15, 0, 10, 20, 5, 20, 

   -10, 0, -20, 20, 10};
C1Sparkline1.SeriesList[0].Data = data;

To write code in VB

Dim data As Double() = {20, 40, 0,10, 20, 25,0, 45, 15, 0, 10, 20, 5, 

    20,-10,0,-20,20,10}
C1Sparkline1.SeriesList(0).Data = data

What You've Accomplished

When you run the project, the sparkline appears like the image below: