Shape Examples

d4's stack shape feature allows you to stack rects, circles and ellipses, which is useful when you don't want to limit your visual design. The following example takes the same dataset and displays it first as a rect, then circles and finally a collection of ellipses.


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