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

Popular posts from this blog

Chemistry - Bond Angles In NH3 And NCl3

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Change The Font Size Of Visual Studio Solution Explorer