Stacked-Bar chart with Category Total Labels II
Uses a second point plot to display the totals.
HTML
<link rel="stylesheet" href="http://www.webdetails.pt/ctools/charts/lib/tipsy.css">
<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) {
new pvc.BarChart({
canvas: "cccExample",
width: 500,
height: 400,
crosstabMode: false,
animate: false,
selectable: true,
hoverable: true,
stacked: true,
legend: true,
contentMargins: {top: 30},
dimensions: {"empty": {isHidden: true}},
color2AxisColors: ["blue"],
color2AxisLegendVisible: false,
plots: [
{
type: 'point',
colorAxis: 2,
dotsVisible: true,
valuesVisible: true,
valuesAnchor: 'top',
visualRoles: {
series: "empty",
color: {from: 'series'}
},
dot_shape: 'bar',
dot_shapeAngle: Math.PI/2,
//dot_strokeStyle: null,
dot_shapeSize: function() {
// Need to provide a default
// for when bar series are hidden
var diam = this.chart.plotPanels.bar.barWidth ||
this.chart.options.barSizeMax;
// "finished(.)" prevents that,
// when hovered, the size of
// the target lines increase
return this.finished(diam);
}
}
]
})
.setData(relational_01_neg /* relational_01*/)
.render();
});