Horizontal Bar Chart with labels placed Outside-End
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(15);
// Calculates best label placement: 1) outside, 2) inside.
// Reads label.text(), label.font(), label.textMargin().
// Assumes label.textAngle() is 0.
// Assumes chart is not Stacked.
// Assumes chart is horizontal.
// To shine with FixedMin and Max, would have to
// place labels within the visible area of the bar.
// As is, labels are frequently placed
// in a hidden inside position.
new pvc.BarChart({
canvas: "cccExample",
width: 500,
height: 450,
title: "Horizontal Bar Chart with labels placed Outside-End",
orientation: 'horizontal',
animate: false,
selectable: true,
hoverable: true,
valuesVisible: true,
valuesFont: 'bold 11px sans-serif',
valuesOptimizeLegibility: true,
// TODO: valuesOverflow should not be taking effect when
// valuesAnchor/label_name is a function.
// Or, at least, the dynamic value of `label_name`
// should be being used...
// So need to turn this off for now.
valuesOverflow: 'show',
// Adjusts left and right plot paddings to 8% of domain
// so that labels have some reserved space
//orthoAxisOffset: 0.1,
// Turn off tick domain rounding, to better see
// the effect.
orthoAxisDomainRoundMode: 'none',
// Test FixedMax, FixedMin
// orthoAxisFixedMax: 95,
extensionPoints: {
// TODO: This works only in JS engines
// whose iteration order is the declaration order
// (not standard!).
// `label_localProperty` must be evaluated before
// `label_labelLayoutInfo`.
// Using _call would provide a safer solution,
// but it's a too recent feature, not wildly available.
...