Cambiar el color de las columnas de volumen (alto / bajo) en HighCharts

Solución:

Al principio, debe establecer series.turboThreshold en 0 si tiene una gran cantidad de puntos. Esto deshabilitará la verificación del formato de datos de entrada.

Luego, para aplicar colores de columna dependiendo de las velas, te sugiero este fragmento de código:

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

Tenga cuidado ya que este código afectará TODOS sus gráficos que están actualmente en la página. Pero puede agregar fácilmente algunas condiciones para ejecutar esto solo en un gráfico específico. Aquí hay una demostración predeterminada de Highstock con el código anterior.

---

---

Utiliza Nuestro Buscador