Charts

Stackable

stackable = new StackableAreaChart
    el                : $('.pillow-stackable-area')
    height            : 300
    padding           : { // Chart padding definition... }
    backgroundPadding : { // Area padding definition... }
    data : {
        series : [
            [
                { x: 0,   y: 50 }
                { x: 20,  y: 23 }
                // Add additional datapoints
            ]
            [
                { x: 0,   y: 29 }
                { x: 20,  y: 55 }
                // Add additional datapoints
            ]
            [
                { x: 0,   y: 16 }
                { x: 20,  y: 6  }
                // Add additional datapoints
            ]
        ]
        axes : {
            x : [
                { position: 15, label: 'January' }
                { position: 45, label: 'February'}
                // Add additional X axis labels
            ]
            y : [
                { position: 175,  label: '175'   }
                { position: 350,  label: '350'   }
                // Add additional Y axis labels
            ]
        }
        markers : {
            x : [
                { position: 120, label: 'Q2' }
                // Add additional X axis markers
            ]
            y : [
                { position: 175,                     style: 'line',   opacity: '0.1' }
                { position: 300, label: 'last year', style: 'dotted', opacity: '0.5', width: '2px' }
                // Add additional Y axis markers
            ]
        }
        background : [ 31, 59, 80, 100] // Shaded background switch points
    }
    colors : { // Color customization }
    layout : {
        highlightDataPointAreaOnMouseover : yes
        enableBubbles                     : yes
        enableProgress                    : yes

        background : { // Background text styling... }
        bubble     : { // Bubble styling... }
        axes       : { // Axes styling... }
        datapoints : { // Datapoint styling... }
    }

stackable.render()

Properties

el

null

jQuery element used to render the chart.

padding

Use to set chart paddings.

backgroundPadding

Use to set area paddings.

data

null

Chart dataset. Format: { series: [], axes: [], markers: [], format: null }

colors

Costumize chart colors.

layout

Costumize fonts, and other layout options.