100% Stacked Bar Chart

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

// X, Y, Color, Size

var relational_04c = {
    "resultset": [
        ["London",     72, 60, 1, 1],
        ["Edinburgh",     100, 60, 1, 1],
        ["Bristol",     16, 95, 1, 1]

    ],
    "metadata": [{
        "colType": "String",
        "colName": "City"
    }, {
        "colType": "Numeric",
        "colName": "Sales"
    }, {
        "colType": "Numeric",
        "colName": "p25"
    }, {
        "colType": "Numeric",
        "colName": "p75"
    }, {
        "colType": "Numeric",
        "colName": "p5"
    }]
};


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

new pvc.MetricDotChart({
    canvas:   "cccExample",
    width:    500,
    height:   400,
    axisGrid: true,
    axisZeroLine: false,
    selectable: true,
    valuesVisible: false,
    valuesMask: "{series}",
    colors: ['#CAEEBA','#7bc45d'],
    valuesAnchor: 'center'

 
})
.setData(relational_04c, {crosstabMode: false})
.render();
});