Stacked bar chart

A stacked bar chart is, as the name suggests, a variant of a standard bar chart, where the bars for each series are stacked on top of each other, like this:

Parameters

In addition to the standard parameters, stacked_barchart takes the following arguments:

horizontalBoolean

By default, the bars are rendered vertically (from bottom to top). If horizontal is true, the bars are rendered from left to right.

moving_averageBoolean

As with the bar chart, if moving_average is true (default false) then a (smoothed) curve is added to the graph to indicate the series' moving average.

Data

Data is provided to the chart using either a list of dictionaries, in JSON or Python, or a DataFrame. In any case, each data element contains three items:

labelstring

Specifies the X axis value for the data point. Used as a label on the X axis.

categorystring

Identifies the "slice" of the bar represented by the value.

valuenumber

Identifies the thickness of the slice at this point.

Here is an example:

<stacked_barchart
    data='[
        { "label": "January",  "category": "Apples", "value": 30 },
        { "label": "January",  "category": "Bananas", "value": 20 },
        { "label": "January",  "category": "Cherries", "value": 10 },
        { "label": "February", "category": "Apples", "value": 20 },
        { "label": "February", "category": "Bananas", "value": 25 },
        { "label": "February", "category": "Cherries", "value": 15 },
        { "label": "March",    "category": "Apples", "value": 25 },
        { "label": "March",    "category": "Bananas", "value": 30 },
        { "label": "March",    "category": "Cherries", "value": 20 },
        { "label": "April",    "category": "Apples", "value": 35 },
        { "label": "April",    "category": "Bananas", "value": 20 },
        { "label": "April",    "category": "Cherries", "value": 25 },
        { "label": "May",      "category": "Apples", "value": 40 },
        { "label": "May",      "category": "Bananas", "value": 35 },
        { "label": "May",      "category": "Cherries", "value": 30 },
        { "label": "June",     "category": "Apples", "value": 30 },
        { "label": "June",     "category": "Bananas", "value": 40 },
        { "label": "June",     "category": "Cherries", "value": 20 }
    ]'
    width=500
    height=500
    colors='deep'
>
</stacked_barchart>

As with other table-like data formats, columns may be freely substituted:

<stacked_barchart
    data='[
        { "month": "January",  "product": "Apples", "value": 30 },
        { "month": "January",  "product": "Bananas", "value": 20 },
        { "month": "January",  "product": "Cherries", "value": 10 },
        { "month": "February", "product": "Apples", "value": 20 },
        { "month": "February", "product": "Bananas", "value": 25 },
        { "month": "February", "product": "Cherries", "value": 15 },
        { "month": "March",    "product": "Apples", "value": 25 },
        { "month": "March",    "product": "Bananas", "value": 30 },
        { "month": "March",    "product": "Cherries", "value": 20 },
        { "month": "April",    "product": "Apples", "value": 35 },
        { "month": "April",    "product": "Bananas", "value": 20 },
        { "month": "April",    "product": "Cherries", "value": 25 },
        { "month": "May",      "product": "Apples", "value": 40 },
        { "month": "May",      "product": "Bananas", "value": 35 },
        { "month": "May",      "product": "Cherries", "value": 30 },
        { "month": "June",     "product": "Apples", "value": 30 },
        { "month": "June",     "product": "Bananas", "value": 40 },
        { "month": "June",     "product": "Cherries", "value": 20 },
    ]'
    width=500
    height=500
    colors='deep'
    labels='month'
>
</stacked_barchart>