Vertical Bar Chart with Category/Value Labels placed Outside-End

by duarteleao

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) {

  // Uncomment to debug the layout.
  //def.setDebug(15);

  // Calculates best label placement: outside or inside,
  // according to label.text(), label.font() and label.textMargin().
  // Assumes label.textAngle() is 0.
  // Assumes chart is not Stacked.
  // Assumes chart is vertical.
  // Hover does not work on the 2nd/category label.
  // Does not really work well with multiple series.
  
  new pvc.BarChart({
    canvas: "cccExample",
    width:   700,
    height:  450,
    title: "Vertical Bar Chart with Category/Value Labels placed Outside-End",
    animate:    false,
    selectable: true,
    hoverable:  true,
    valuesVisible: true,
    valuesFont: '11px sans-serif',
    
    // Do not show series, by mapping the first column to
    // a non-special column name.
    readers: ["country", "category", "value"],
    
    // Force size of categorical bands, so that category
    // labels surely fit (chart width will grow as needed).
    baseAxisBandSize: 60,
    baseAxisBandSpacing: 5,
    //baseAxisBandSizeRatio: 0.8,
    
    baseAxisVisible: false,
    
    // 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',

    // Uncomment to automatically change the labels' 
    // colors according to their bar's bg color.
    // Uncomment and remove the fixed textStyle below,
    // if you're sure text won't overflow the bars' width.
    // Otherwise, it doesn't look that good...
		//valuesOptimizeLegibility: true,
    
    // Adjusts bottom and top plot paddings to a % of domain
    // so that labels have some reserved space outside bars.
    //orthoAxisOffset: 0.1,
    
    // Idem for horizontal padding.
    baseAxisOffset: 0.05,

    // Uncomment to turn off tick domain...