I am using a Candlestick plot to show a distribution of a few different data sets. I am trying to have two trend lines show overtop of the Candlesticks, but they are consistently appearing behind it instead.
I am using JSFiddle to try to tweak it, but I cannot get it to show up properly.
Here is my Javascript:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([['Year','Min','Q1','Q3','Max','Med','Baseline'],['A',14,20.75,27,34,25,24],['B',13,21,30,39,27,24],['C',16,23.5,30.5,43,27,24],['D',14,22.75,31.25,39,25.5,24],['E',17,23.5,32,40,27.5,24],['F',19,23,30,39,27,24],['G',16,22,28.75,35,26.5,24],['H',14,24.75,33,42,28.5,24],['I',17,27,35,43,32,24],['J',12,24,31.75,43,26.5,24]]);
var options = {
title : 'Distribution',
vAxis: {
title: 'Total',
minValue: 0,
maxValue: 45,
gridlines: {
count: 46,
multiple: 1
}
},
hAxis: {title: 'Cohort'},
legend: false,
seriesType: 'candlesticks',
candlestick: {
hollowIsRising: 1,
risingColor: {
fill: '2e74b5' ,
stroke: '#2e74b5'
}
},
lineDashStyle: [1,1],
pointsVisible: false,
series: {0: {areaOpacity:0.5,visibleInLegend: false},1: {type: 'steppedArea',areaOpacity:0,pointsVisible:0,visibleInLegend: false,dataOpacity:1},2: {type: 'line', areaOpacity:0,visibleInLegend:false}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Unfortunately, I cannot get the line and steppedArea to appear above the candlesticks. I have tried to reorder the columns to have the steppedArea be series 0, line as series 1, and the remainder of the data being used as a candlestick for series 2, but the graph would not render. I tried to accomplish this through the recommendation of this post. I tried using the setColumns command, but it didn't take.
I have also played around with making the boxes of the candlestick graph transparent, but I was less pleased with how this looks (because a boxplot would not typically have the whiskers running right through the graph).
Based on the two things I have tried, I have been able to get it to output with filled in boxes that obscure the lines (Image 1) as well as transparent boxes with visible lines (Image 2).
Lines are Visible, But I Want The Boxes Filled In
What I want to achieve is the lines overtop of the boxes, but despite making an effort to change the ordering of the columns (and therefore, the series), this version of the graph would not render.
There is a question on here from 2021 that says the z-index cannot be set for different series in a Google Chart. Is this still a bug that has not been resolved? If so, can anyone recommend a different way to achieve the same graph? I am only used to working with Google App Scripts and this is my first time trying to build a web app, but I am not married to Google Visualization as the vehicle to make this chart if there is another Javascript option that might work.
