Bar Chart with Static Overlapped Bars

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

new pvc.BarChart({
canvas: "cccExample",
width: 700,
height: 400,

// Data source
crosstabMode: false,

// Data
calculations: [
// Assign dataPart to according to series
{names: "dataPart", calculation: function(datum, out) {
var series = datum.atoms.series.value;
out.dataPart = (series === "London" ? "0" : "1");
}}
],

// Filter out the Lisbon series
dataWhere: function(datum) {
return datum.atoms.series.value !== 'Lisbon';
},

// Interaction
animate: false,
clickable: true,
selectable: true,
hoverable: true,

legend: true,

plots: [
// Main plot (type bar)
{
name: "main", 
dataPart: "0"
},
{
type: 'point',
linesVisible: true,
dotsVisible: true,
colorAxis: 2,
dataPart:"0"
},
// Second plot
{
type: "bar",
dataPart: "1",
barSizeMax: 20
}


],


// Proportion of Band occupied vs free space
baseAxisBandSizeRatio: 0.6
})
.setData(relational_04)
.render();