Basic Stacked Column

The stacked column chart is used to sum a series of data elements grouped along the xAxis. This chart is often useful in conjunction with a grouped column chart because they can use the same data series, and where the stacked column highlights the sum of the data series across an axis the grouped column can be used to show the relative distribution.

This example also demonstrates one of the various data parsers available to developers using d4. In this example, we use the nestedStack parser which makes it trivial for the developer to prepare the incoming data in a way that the chart expects it.

This example also mixes in a zero line to visually demarcate where the series elements dip below zero. This is especially helpful in charts like the stacked column, which are often used for financial analysis.


Average Gina Bob
CSS Code

#stacked_column .d4 .series0 .bar.fill, #stacked_column .average {
    fill: #CD202C;
    background-color: #CD202C;
}

#stacked_column .d4 .series1 .bar.fill, #stacked_column .gina {
    fill: #AD005B;
    background-color: #AD005B;
}

#stacked_column .d4 .series2 .bar.fill, #stacked_column .bob {
    fill: #66307C;
    background-color: #66307C;
}
JavaScript Code