Adaptive Value Label Color

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" />

JavaScript

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

    // NOTE: This example was created prior to the implementation of the 
    // "valuesOptimizeLegibility" option, in the bar chart.

    new pvc.BarChart({
        canvas: "cccExample",
        width:  500,
        height: 400,    
        title: "Adaptive Value Label Color",
        animate:    false,
        selectable: true,
        hoverable:  true,
        legend:     true,
        stacked:    true,
        valuesVisible: true,
        //valuesOptimizeLegibility: true, // the same as

        barLabel_font: 'bold 12px sans-serif',

        barLabel_textStyle: function() {
          // The color we would have, 
          // if not extending:
          var color = this.delegate();

          // Get the bg color, from the correspoonding bar.
          // Assuming the default text color is also dark.
          var bgColor = this.pvMark.target.fillStyle();
          return bgColor && bgColor.isDark() 
            ? color.complementary().alpha(0.9)
          : color;
        }
    })
    .setData(relational_01, { crosstabMode: false })
    .render();
});