Estoy intentando cambiar el color del label de la tercera columna de cada segmento en la gráfica, el problema que tengo es que no logro hacerlo en base al valor de la primer columna contra la tercera.
El primer segmento dice Frente 01 y la columna de meta está en color celeste, la columna de cuota por hora en verde y la columna de cuota en negro.
Si la columna de meta es de 2650 y la tercera que es la cuota equivale del 80% a 100% de esos 2650 el label debe ser color azul, si el porcentaje está entre 20% a 79% naranja y 19% a 0% en rojo.
En el snippet en el primer segmento la cuota tiene el valor de 2300.96 entonces debería ser color azul, en el segundo la cuota tiene valor de 112 contra 2300 lo cual debería ser rojo.
Por su ayuda muchas gracias.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Cuota de Ingreso de Caña Por Frente'
},
subtitle: {
text: 'Subtitulo'
},
xAxis: {
categories: ['Frente 01', 'Frente 02', 'Frente 03', 'Frente 04', 'Frente 07', 'Frente 11', ],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'TN DE CAÑA INGRESADA'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} tons</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
dataLabels: {
enabled: true,
color: 'blue'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Meta del Día',
data: [2650.00, 2300.00, 900.00, 1800.00, 1300.00, 1400.00]
}, {
name: 'Cuota Por Hora',
data: [220.83, 191.67, 75.00, 150.00, 108.33, 116.67]
}, {
name: 'Cuota Ingresada',
data: [2300.96, 112.94, 96.20, 0.00, 133.99, 222.11]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>