Pie chart looking like a Gauge
Making a pie chart look like a donut/gauge - label at center.
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" />
JavaScript
require([
"ccc/pvc",
"ccc/def",
"ccc/protovis"
], function(pvc, def, pv) {
new pvc.PieChart({
canvas: 'cccExample',
width: 300,
height: 300,
animate: false,
selectable: true,
hoverable: true,
valuesVisible: true,
valuesLabelStyle: 'inside',
valuesFont: '35px sans-serif',
valuesMask: '{value.percent}',
label_visible: function() { return !this.index; },
label_left: null,
label_top: null,
label_textAngle: 0,
label_textAlign: 'center',
label_textBaseline: 'middle',
label_strokeStyle: 'black',
slice_innerRadiusEx: '85%',
categoryRole: "series",
slice_fillStyle: function() {
return this.index === 0 ? this.delegate() : "lightgray";
}
})
.setData(relational_04b, {crosstabMode: false})
.render();
});