zquad
Posts: 5
Joined: Fri Aug 19, 2022 12:45 am

Changing color of volume Columns using React js

I am using React

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));
or

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
          }
        });
      }


    });
  };
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Changing color of volume Columns using React js

Hello zquad!
We appreciate you reaching out to us!

Here is a demo in React.js with some static data. All you need to do is use this code, which overrides the core function in Highcharts and everything will works correctly, just like in the demo below.

Demo: https://codesandbox.io/s/highcharts-rea ... ked-egfvkr

Feel free to ask any further questions.
Regards!
Hubert Kozik
Highcharts Developer
zquad
Posts: 5
Joined: Fri Aug 19, 2022 12:45 am

Re: Changing color of volume Columns using React js

The problem with this approach is that ALL highchart instances will be filled by whatever color I set for just the stock.

Is there an alternative solution?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Changing color of volume Columns using React js

zquad,
Sure, it is possible to enable this feature only for some charts. You can add some logic based on the property from e.g. series - just like in this demo: https://codesandbox.io/s/highcharts-rea ... ked-8pzgj4 The custom logic will start to work if series.enabledColorOfVolume will be set to true.

Kind regards!
Hubert Kozik
Highcharts Developer
zquad
Posts: 5
Joined: Fri Aug 19, 2022 12:45 am

Re: Changing color of volume Columns using React js

Ah. Thanks
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Changing color of volume Columns using React js

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”