Move the Axis Line

Building on the Quick Start example, you can show negative values below the axis using the valueAxis option, and set the axis value using the origin option. This is helpful, for example, when you want to show negative values as those below a quota in sales.

Note: The valueAxis option has no effect if the type is the default "line" chart, so you must set the type to "column" or "area" for it to take effect.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the valueAxis option to true, and uses the origin option to change the value of the axis to 10.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijsparkline"], function () { $(document).ready(function () { $("#wijsparkline").wijsparkline({ valueAxis: true, origin: 10, data: [33, 11, 15, 26, 16, 27, 37, -13, 8, -8, -3, 17, 0, 22, -13, -29, 19, 8], type: "area" }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
require(["wijmo.wijsparkline"], function () {
$(document).ready(function () {
    $("#wijsparkline").wijsparkline({
        valueAxis: true,
        origin: 10,
        data: [33, 11, 15, 26, 16, 27, 37, -13, 8, -8, -3, 17, 0, 22, -13, -29, 19, 8],
        type: "area"
    });
});
});
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the widget.
Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with any values below 10 showing below the axis line.

Reference

Widgets

SparkLine