Display Negative Values

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

In Source View

Complete the following steps:

Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following reference within the <head></head> tags:

                        
    <!--RequireJs-->
    <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
    <script type="text/javascript">
        requirejs.config({
            baseUrl: "http://cdn.wijmo.com/amd-js/3.20143.59",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
        });
    </script>

Add the following script between the <head></head> tags to initialize the widget and set its options as described below:
- valueAxis option to true so that an axis separates positive from negative values.
- origin option to 0. (By default, it is halfway between the min and max values.)
- type option to "column," which is the only type that supports negStyle and zeroStyle attributes.
- seriesStyles option so that the column color (fill) is green, the column color for negative values (negStyle) is yellow, and the color for a value of zero (zeroStyle) is red.
```
<script id="scriptInit" type="text/javascript">
require(["wijmo.wijsparkline"], function () {
$(document).ready(function () {
    $("#wijsparkline").wijsparkline({
        valueAxis: true,
        origin: 0,
        data: [33, 11, 15, 26, 16, 27, 37, -13, 8, -8, -3, 17, 0, 22, -13, -29, 19, 8],
        type: "column",
        seriesStyles: [
            {
                fill: "green", 
                negStyle: {fill: "yellow"}, 
                zeroStyle: {fill:"red"}
            }
        ]
    });
});
});
</script>
```
Add the following markup within the <body></body> tags of the page, just after @RenderBody() to create the wijsparkline widget.
```
<div id="wijsparkline" style="height:50px;width:200px" />
```
Press F5 to run the project.

What You've Accomplished

The wijsparkline will appear as shown in the image below, with the negative values showing in yellow below the axis and one zero value showing in red on the axis: