Building on the Quick Start example, you can show negative values below the axis using the valueAxis option, and change column colors using the seriesStyles option.
- In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the following options:
- Sets the valueAxis option to true so that an axis separates positive from negative values.
- Sets the origin option to 0. (By default, it is halfway between the min and max values.)
- Sets the type option to "column," which is the only type that supports negStyle and zeroStyle attributes.
- Sets the 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 |
Copy Code |
<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> |
- 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 the negative values showing in yellow below the axis line, and one zero value showing in red at the axis line.
See Also
