Recently I have faced a problem of creating histogram + line combo chart. My first attempt was using google-charts but the problem is that according to the documentation it is not possible to use histogram type in a combo charts. the same problem I had with Plotly.js library. Fortunately these libraries are very flexible so I tried to use vertical bar (column) chart instead of the histogram.
Nevertheless bar chart x-axis has ticks (labels) for every bar (see Fig.1) instead of the “from-to” range as in normal histogram or line chart (Fig.2). So the post is about how to fix that for both libraries. The main trick is in shift of the plot to the right. lets see how it’s done in codepen for google-chart and for plotly.js
code for google-chart is below:
 |
| Fig.1. Bar chart |
 |
| Fig.2. Histogram + line combo chart |
Nevertheless bar chart x-axis has ticks (labels) for every bar (see Fig.1) instead of the “from-to” range as in normal histogram or line chart (Fig.2). So the post is about how to fix that for both libraries. The main trick is in shift of the plot to the right. lets see how it’s done in codepen for google-chart and for plotly.js
code for google-chart is below:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var config = [{color: 'lightblue', label: 'Select'}, {color: 'blue', label: 'CTX'}, {color: 'green', label: '100%'}];
var data = new google.visualization.DataTable();
data.addColumn('number', 'Amount');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addColumn('number', config[0].label);
data.addColumn('number', config[1].label);
data.addColumn('number', config[2].label);
data.addRows([
[0.5, null, 50, 80, 111],
[1.5, null, 30, 170, 200],
[2.5, null, 300, 300, 300],
[3.5, null, 250, 310, 370],
[4.5, null, 150, 240, 250]
]);
// setting tooltip
for (var i = 0, rows = data.getNumberOfRows(), month; i < rows; i++) {
data.setValue(i, 1,`<div class="gc-tooltip">
<div style="color:${config[0].color;">
Select:<span class="gc-right">${data.getValue(i,2)}</span>
</div>
<div style="color:${config[1].color;">
CTX:<span class="gc-right">${data.getValue(i,3)}</span>
</div>
<div style="color:${config[2].color;">
100%:<span class="gc-right">${data.getValue(i,4)}</span>
</div>
</div>`);
}
var options = {
vAxis: {
title: 'Trace Frequency',
gridlines: {color: 'gainsboro'}
},
hAxis: {
title: 'Amount', format: '#K',
ticks: [0, 1, 2 , 3, 4, 5],
gridlines: {color: 'white'}
},
series: {
0: {type: 'bars', color: config[0].color},
1: {type: 'line', color: config[1].color},
2: {type: 'line', color: config[2].color}
},
legend: "none",
bar: {groupWidth: "98%"},
pointSize: 8,
focusTarget: 'category',
tooltip: {isHtml: true},
width: 600,
height: 400,
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
var trace0 = {
x: [0.5, 1.5, 2.5, 3.5, 4.5],
y: [111,200,300,370,250],
type: 'scatter',
marker: {
color: 'green'
},
hoverinfo: 'y'
};
var trace1 = {
x: [0.5, 1.5, 2.5, 3.5, 4.5],
y: [80, 170, 300, 310, 240],
type: 'scatter',
marker: {
color: 'blue'
},
hoverinfo: 'y'
};
var trace2 = {
x: [0.5, 1.5, 2.5, 3.5, 4.5],
y: [50,30,300,250,150],
type: 'bar',
marker: {
color: 'lightblue'
},
hoverinfo: 'y'
};
var layout = {
xaxis: {
zeroline: false,
title: 'Amount',
range: [0, 5],
type: 'linear',
dtick: 1,
ticksuffix: 'K'
},
yaxis: {
title: 'Trace Frequency',
range: [0, 400],
type: 'linear'
},
bargap :0.01,
margin: {
pad: 10
},
showlegend: false,
hovermode: 'x',
}
Plotly.newPlot('myDiv', [trace0, trace1, trace2], layout);
