Legend with Colored Item Labels
Labels colored the same as the the legend item markers.
by gaurav_ashara
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) {
new pvc.PieChart({
canvas: 'cccExample',
width: 600,
height: 400,
// Data source
crosstabMode: false,
// Panels/Legend
legend: true,
legendPosition: 'left',
legendAlign: 'center',
legendDot_shape: 'circle',
// This is what is really relevant!
legendLabel_textStyle: function(scene) {
var colorScale = this.panel.axes.color.scale;
return colorScale("red");
},
// Chart/Interaction
animate: false,
selectable: true,
hoverable: true
})
.setData(relational_03_b)
.render();
});