Highlighting the selected category band on the X axis
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" />
JavaScript
require([
"ccc/pvc",
"ccc/def",
"ccc/protovis"
], function(pvc, def, pv) {
var selectedCateg = "BMW";
new pvc.BarChart({
canvas: "cccExample",
width: 700,
height: 400,
axisGrid: true,
orientation: "horizontal",
extensionPoints: {
plot_add: function() {
// Shadow Panel
return new pv.Panel()
.left(function() {
var baseScale =
this.getContext().chart.axes.ortho.scale;
return baseScale(selectedCateg) -
baseScale.range().step / 2;
})
.width(function() {
var baseScale =
this.getContext().chart.axes.ortho.scale;
return baseScale.range().step;
})
.fillStyle('rgba(0,0,250, 0.3)');
}
}
})
.setData(relational_04, {crosstabMode: false })
.render();
});