Candlesticks Is Always On Top Of Lines In Combo Chart Google Chart

I am using google charts and am very new to the API, now the thing that will most likely work for my requirments is a Combo Chart, this chart is very good with everything but only

Solution 1:

This can be done with a combo chart.

Here is sample code:

function drawVisualization() {
  // Create and populate the data table.vardata = new google.visualization.DataTable();
  data.addColumn('string', 'Day');
  data.addColumn('number', 'Dummy');
  data.addColumn('number', 'Range');
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn('number', 'Trend');
  data.addRows([
    ['Mon', 28, 10, -8, 17, 42.8],
    ['Tue', 38, 17, -7, 28, 47.5],
    ['Wed', 55, 22, -5, 25, 52.2],
    ['Thu', 66, 11, -16, 11, 56.9],
    ['Fri', 22, 44, -7, 44, 61.6],
  ]);

  // Create and draw the visualization.var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
  ac.draw(data, {
    title : 'Monthly Coffee Production by Country',
    width: 600,
    height: 400,
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    isStacked: true,
    seriesType: "bars",
    series: {0: {color: 'transparent'}, 2: {type: "line"}}
  });
}

This is the result:

Adjust as needed (combining with the below tactics if needed).

Pre-Edit Answer Below

Currently z-index is not supported for Google Visualization API. See this ticket from April 2012.

If you need to use a ComboChart there are potential workarounds, but there is a good chance you won't like them.

Option 1: Create custom javascript

You can edit the svg that Google Visualization creates with javascript. According to this question you can change the z-index of elements by moving their order up in the SVG. So you'd have to:

1. Find the svg representing the candlestick elements
2. Find out where the last item you want it behind is
3. Move the candlestick elements behind that item in the svg

This is obviously a headache (especially if you look at the svg formatting of the resulting chart in something like firebug).

Option 2: Creative CSS

This is a bit simpler to implement, but has its own set of pitfalls (performance, compatibility across browsers, etc.).

Create two charts, one with just the candlesticks, one with the bars and candlesticks.

Make sure the scales of each chart are the same.

Use the CSS Z-index to put the chart with the candlesticks below the other chart.

Make sure the top chart is transparent, and nothing like labels, legends, or other chart junk is duplicated across the charts.

On the top chart, make the candlestick bars invisible (you want them there so that the values of the bars are displayed, but you don't want to see them as they'd be on top). There are many ways to do this (making the line width 0, making the color transparent, or something of the sort).

Create an event on the top chart that links the mouseover event to select the same series on the bottom chart, so that it looks to the user like you have one chart (since they both interact as one chart).

This will hurt performance because you are rendering two charts, and transparent backgrounds don't work on some version of IE. It also means a lot more work on the actual chart code, because you have to line up the charts and make sure that it won't break depending on how you change the data.

3) Simplest Option: Use the Candlestick Chart

You can do this with the Candlestick Chart as well. It may be a bit more limited than a ComboChart, but it does allow you to put the 'bars' in front of the 'sticks' as it were.