Candlestick shift in combo chart

Question

I am using Google Chart API, primarily Combo Chart to display different data in the same graph area. When I use CandleStick alone it looks fine:

However when I add another bar series it causes slight shift and now candles look all messed up.

It seems that width of left Vertical axis causes this slight shift. Problem is, I need both axis shown. I tried adjusting strokewidth of both falling and rising, it just make it look fuzzy. So making strokewidth to less than 1 is not too effective.

Code

var options = {
    title: jsondata['chart_title'],
    hAxis: {direction: -1},
    vAxes: {0:{format:y_units},1:{format:"$#.##"}},
    seriesType: "bars",
    series: {0: {type: "candlesticks", targetAxisIndex: 1}},
    candlestick: {
        fallingColor:{
            strokeWidth: .5
        },
        risingColor:{
            strokeWidth: .5
        }
    },
    displayAnnotations: true,

    crosshair: { trigger: 'both' }
}

and actual drawing element

var chart = new google.visualization[jsondata['chart_type']](document.getElementById('chart_div'));
$.extend(options, {legend:{position:'bottom'}})
chart.draw(data, options);

Sample Data

['Mon', 11, 10, 8, 17, 1],
['Tue', 12, 17, 7, 28, 5],
['Wed', 6, 22, 5, 25, 0],
['Thu', 10, 11, 16, 11, 0],
['Fri', 15, 44, 25, 44, 3]

• Note: Data needs to be way LARGER for this to have effect, so copying paste this data 10 times should do the trick. When there are only few data points, candlesticks are fairly larger and even if there is an effect, it is marginal

Any suggestions to make it look normal?

Answer 1

This effect happens when you have too many bar-type (candlestick and bar) data points in a chart for the width of the chart. When using a discrete (string-type) axis, each row of data is allocated (width / rows) pixels for the bar group, and bars are aligned side-by-side within the group, which generates some odd effects when the group width gets narrow. You can address this problem by using some combination of the following:

1. increase the width of the chart
2. increase the width of the bar groups (via the bar.groupWidth option, set to '100%' to maximize)
3. set the isStacked option to true
4. use a Control to filter your data and make the displayed data set smaller