Stacked-Bar chart with Category Total Labels at the right of the plot panel

by gaurav_ashara

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample"></div>

JavaScript

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

    // debug layout
    // def.setDebug(16);

    new pvc.BarChart({
        canvas: "cccExample",
        width:   450,
        height:  400,
        title:   "Stacked-Bar Chart with Category Total Labels at the right of the plot panel",
        animate:    false,
        selectable: true,
        hoverable:  true,
        stacked:    true,
        valuesVisible: true,
        orientation: "horizontal",
        
        // Adjusts top (and bottom :-/ ) plot paddings to 5% of domain
        // to reserve some space to the total labels.
        orthoAxisOffset: 0.1,

        extensionPoints: {
            plot_add: function() {
                return new pv.Label()
                    .data(function() {
                        // A Bar chart's visibleData is grouped 
                        // by Category > Series.
                        var cccContext = this.getContext();
                        // Return the category Data children.
                        return cccContext.panel.visibleData().childNodes;
                    })
                    .font('bold 12px sans-serif')
                    .right(0)
                    .textBaseline('middle')
                    .textAlign('top')
                    .bottom(function(catData) {
                        // Scales use the keys, not the values.
                        return this.getContext()
                            .panel.axes.base.scale(catData.key);
                    })
                    .text(function(catData) {
                        // Getting the sum of each category is easy.

                        // The name of the dimension to which the 
                        // "value" visual role is bound.
                        var valueDimName = this.getContext()
                            .panel.visualRoles.value.firstDimensionName();

                        // catData's local dimension object
                    ...