Change Chart Types

Building on the Quick Start example, you can change the chart type using the type option. The default type is a line chart, but you can change it to area or column.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the type to area, and sets the valueAxis option to true to show the axis line and delineate positive and negative values.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijsparkline"], function () { $(document).ready(function () { $("#wijsparkline").wijsparkline({ valueAxis: true, 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,
        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 the area between the line and the axis filled in.

Reference

wijsparkline API

type Option

valueAxis Option

Widgets

SparkLine