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

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?