I was looking for a way to change the color of volume colors for an OHLC chart depending on whether open > close. I found the following examples but they dont play well with react and most of these solutions were from 2012. What is the official way to change volume colors currently and remember I am using Reactjs
Code: Select all
Highcharts.seriesTypes.column.prototype.pointAttribs = (function(func) {
return function(point, state) {
var attribs = func.apply(this, arguments);
var candleSeries = this.chart.series[0]; // Probably you'll need to change the index
var candlePoint = candleSeries.points.filter(function(p) { return p.index == point.index; })[0];
var color = (candlePoint.open < candlePoint.close) ? '#FF0000' : '#000000'; // Replace with your colors
attribs.fill = state == 'hover' ? Highcharts.Color(color).brighten(0.3).get() : color;
return attribs;
};
}(Highcharts.seriesTypes.column.prototype.pointAttribs));
Code: Select all
var baseRender = Highcharts.seriesTypes.column.prototype.render;
Highcharts.seriesTypes.column.prototype.render = function() {
var color,
points = this.points,
series = this;
// Call the base method
baseRender.apply(this, arguments);
// Extend it
$.each(this.points, function(i, point) {
if (i > 0 && point.y > points[i - 1].y) {
color = 'red';
} else {
color = 'blue';
}
point.graphic.attr({
fill: color
});
if (point.pointAttr == series.pointAttr) {
point.pointAttr = Highcharts.merge(series.pointAttr, {
'': {
fill: color
}
});
}
});
};