Charts

Line

line = new LineChart
    el                : $('.pillow-line')
    height            : 200
    padding           : { // Chart padding definition... }
    backgroundPadding : { // Area padding definition... }
    data : {
        series : [
            [
                { x: 0,   y: 33 }
                { x: 10,  y: 30 }
                // Add additional datapoints
            ]
            [
                { x: 0,   y: 13 }
                { x: 10,  y: 20 }
                // Add additional datapoints
            ]
        ]
        axes : {
            x : [
                { position: 30,  label: 'January'  }
                { position: 45,  label: 'February' }
                // Add additional X axis labels
            ]
            y : [
                { position: 50,  label: '50%'      }
                { position: 100, label: '100%'     }
                // Add additional Y axis labels
            ]
        }
        markers : {
            x : [
                { position: 120, label: 'Q2' }
                // Add additional X axis markers
            ]
            y : [
                { position: 30,                     style: 'line'   }
                { position: 62, label: 'last year', style: 'dotted' }
                // Add additional Y axis markers
            ]
        }
        background : [ 0, 31, 59, 90, 120, 151] // Shaded background switch points
    }
    colors : { // Color customization }
    layout : {
        highlightDataPointAreaOnMouseover : yes
        showAllDataPoints                 : no
        enableProgress                    : yes

        series     : { stroke: '3px' }
        background : { // Background text styling... }
        bubble     : { // Bubble styling... }
        axes       : { // Axes styling... }
        datapoints : { // Datapoint styling... }
    }

line.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.