BiDi Synced Pie and Bar Chart Selection

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>
<div id="cccExample1"></div>
<div id="cccExample2"></div>

JavaScript

require(["ccc/pvc", "ccc/def"], function(pvc, def) {
  
    var cdaData = {
        metadata: [
            {colName: 'category', colType: 'string'},
            {colName: 'value',    colType: 'number'}
        ],
        resultset: [
            ['Aa', 10],
            ['Bb', 15],
            ['Cc', 15],
            ['Dd', 10],
            ['Ee', 20],
            ['Ff', 10],
            ['Gg',  5],
            ['Hh',  5],
            ['Ii',  5],
            ['Jj',  5]
        ]
    };

    var pie1 = new pvc.PieChart({
        canvas: 'cccExample1',
        width:  400,
        height: 200,
        crosstabMode: false,
        //legend: true,
        animate: false,
        selectable: true,
        hoverable:  true,
        valuesVisible: false,
        selectionChangedAction: replaceSelected
    })
    .setData(cdaData)
    .render();

    var bar1 = new pvc.BarChart({
        canvas: 'cccExample2',
        width:  400,
        height: 200,
        crosstabMode: false,
        animate:    false,
        selectable: true,
        hoverable:  true,
        colorRole: "category"/*,
        selectionChangedAction: replaceSelected*/
    })
    .setData(cdaData)
    .render();


    function replaceSelected(selectedDatums) {
      var selectedFilter = def.query(selectedDatums)
        .select(function(datum) {
          return {category: datum.atoms.category.value};
        })
        .array();

      updateChart(pie1);
      updateChart(bar1);

      function updateChart(chart) {
        chart.data.replaceSelected(chart.data.datums(selectedFilter));
        chart.render(true, true, false);
      }
    }
});