Sparkline Types in JQuery Sparkline widget

20 Mar 20183 minutes to read

Line Type

To render a Line type Sparkline, set the type as line. To change the color and width of the line, you can use the fill and width property.

javascript

$("#container").ejSparkline({
            // ...
            width: 3,
            fill: "#33ccff", 
            // ...
        });

Column Type

To render a Column Sparkline, set the type as column To change the color of the column, you can use the fill property.

javascript

$("#container").ejSparkline({
            // ...
            type: 'column',
            fill: "#33ccff",
            // ...
        });

Area Type

To render an Area Sparkline, you can specify the type as area. To change the Area color, you can use the fill property

javascript

$("#container").ejSparkline({
            // ...
            type: 'area',
            fill: '#69D2E7'
            // ...
        });

WinLoss Type

WinLoss Sparkline render as a column segment and it show the positive, negative and neutral values. You can customize the positive and negative color of the win-loss type.

javascript

$("#container").ejSparkline({
            // ...
            type: 'winLoss',
            fill: '#69D2E7'
            // ...
        });

Pie Type

You can create a pie type sparkline by setting the type as pie. Colors for the pie can be customize using palette property.

javascript

$("#container").ejSparkline({
            // ...
            type: 'pie',
            palette: ['#ff3399', "#33ccff"],
            // ...
        });