CandlestickChart colors setting

[Ji Joe]

I recently made a candlestickChart to show some financial datas. And set the risingColor.fill red and fallingcolor.fill green.

But the color of the stick of candle that present the highest and lowest value of the datas can not be like as the fill .They only show the color of the serie

I want the colors of the sticks in one serie be different, but the serie color option offers only one,

Could someone give me some advices for this problem?Thank you!

[asgallant]

The color of the "wicks" of candles is determined by the series color, and there is no way to override that.  You can make a feature request for it here, if you want.

You could try separating your candlestick series into two different series, one for the rising values and one for the falling values.  A DataView should take care of that for you without too much trouble, maybe something like this:

var view = new google.visualization.DataView( data );
view.setColumns([0, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function (dt, row) {
        // if column 2 <= column 3, it's rising, so include here
        return (dt.getValue(row, 2) <= dt.getValue(row, 3)) ? dt.getValue(row, 1) : null;
    }
}, {
    type: 'number',
    label: data.getColumnLabel(2),
    calc: function (dt, row) {
        // if column 2 <= column 3, it's rising, so include here
        return (dt.getValue(row, 2) <= dt.getValue(row, 3)) ? dt.getValue(row, 2) : null;
    }
}, {
    type: 'number',
    label: data.getColumnLabel(3),
    calc: function (dt, row) {
        // if column 2 <= column 3, it's rising, so include here
        return (dt.getValue(row, 2) <= dt.getValue(row, 3)) ? dt.getValue(row, 3) : null;
    }
}, {
    type: 'number',
    label: data.getColumnLabel(4),
    calc: function (dt, row) {
        // if column 2 <= column 3, it's rising, so include here
        return (dt.getValue(row, 2) <= dt.getValue(row, 3)) ? dt.getValue(row, 4) : null;
    }
}, {
    type: 'number',
    label: data.getColumnLabel(1),
    calc: function (dt, row) {
        // if column 2 > column 3, it's falling, so include here
        return (dt.getValue(row, 2) > dt.getValue(row, 3)) ? dt.getValue(row, 1) : null;
    }
}, {
    type: 'number',
    label: data.getColumnLabel(2),
    calc: function (dt, row) {
        // if column 2 > column 3, it's falling, so include here
        return (dt.getValue(row, 2) > dt.getValue(row, 3)) ? dt.getValue(row, 2) : null;
    }
}, {
    type: 'number',
    label: data.getColumnLabel(3),
    calc: function (dt, row) {
        // if column 2 > column 3, it's falling, so include here
        return (dt.getValue(row, 2) > dt.getValue(row, 3)) ? dt.getValue(row, 3) : null;
    }
}, {
    type: 'number',
    label: data.getColumnLabel(4),
    calc: function (dt, row) {
        // if column 2 > column 3, it's falling, so include here
        return (dt.getValue(row, 2) > dt.getValue(row, 3)) ? dt.getValue(row, 4) : null;
    }
}]);

[Ji Joe]

Oh,It's a good method.

But when i combined it with my ChartRangeFilter, the range changed and it showed an error that  Cannot set property 'width' of null    One or more participants failed to draw() 
Also the candles' positions are not normal,a little excursion.
在 2012年9月1日星期六UTC+8上午12时18分03秒，asgallant写道：

[asgallant]

Try setting the candlestick chart's ChartWrapper's view.columns option to the array used in the view.setColumns() call instead of using the DataView object.

As for the positioning, there isn't anything that can be done about it if you split the series like this.  You actually have two series being drawn side-by-side at each data point, but since one of them has no data at each point, then you don't see the second candlestick.