Change Color Of Volume Columns (High/Low) In HighCharts
Answer :
At first, you need to set series.turboThreshold to 0 if you have a big amount of points. This will disable the input data format check.
Then, to apply column colors depending on candles, I suggest you this piece of code:
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));
Be careful as this code will affect ALL of your charts that currently on page. But you can easily add some conditions to run this only on specific chart. Here is a default Highstock demo with the code above.
Comments
Post a Comment