Stacked area chart

As the name implies, a stacked area chart layers several areacharts on top of one another, like this:

Parameters

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

curveBoolean

As with area charts, if true, a cubic spline is plotted to give a smooth(ed) version of the curve connecting the given points. curved defaults to false.

x_label_angleNumber (degrees)

Specifies the number of degrees clockwise that the X axis labels should be turned. This is to handle long labels. The default value is 0 (no rotation).

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_areachart
    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_areachart>