Home / Questions / 130358
Accepted
raintrooper
Asked: 2020-01-12 06:12:46 +0800 CST 2020-01-12 06:12:46 +0800 CST

Change label color Highcharts JavaScript charts

  • 772

I am trying to change the color of the label of the third column of each segment in the graph, the problem I have is that I cannot do it based on the value of the first column against the third.

The first segment says Front 01 and the goal column is in light blue, the hourly quota column is green, and the quota column is black.

If the goal column is 2,650 and the third one, which is the quota, is equivalent to 80% to 100% of those 2,650, the label must be blue, if the percentage is between 20% to 79% orange and 19% to 0% in red.

In the snippet in the first segment the odd has the value of 2300.96 so it should be blue, in the second the odd has a value of 112 against 2300 which should be red.

Thank you very much for your help.

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>

javascript

1 Answers

  1. Best Answer

    I was able to solve it by implementing a formatter function, according to the following code.

    var contador = 0;
var contador2 = 0;
var arreglo = [];
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',

        formatter: function() {
          var theSeries = this.series[1];
          var theCompSeries = this.series.map;
          var color ='Black';

          if (this.series.name == "Cuota Por Hora"){
               arreglo[contador] = this.y;
           
            contador = contador + 1;
            
          } 
          if (this.series.name == "Cuota Ingresada"){
               var meta =  arreglo[contador2];
           var cuota = this.y;
            var porcentaje = (cuota/meta)*100.00;
            if (porcentaje >80.00){
              color = 'Green';
            }else if(porcentaje < 80 & porcentaje ){
            	color= 'Red';
            
            }
            console.log(porcentaje);

            contador2 = contador2 + 1;
          }          

          return '<span style="color: ' + color + '">' + this.y + ' </span>';
        },
      }
    }
  },
  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>

    • 1