Change label color graphics Highcharts JavaScript

Question

Change label color graphics Highcharts JavaScript

Navigation

#1 by (1 votes)

2

I'm trying to change the label color of the third column of each segment in the graph, the problem I have is that I can not 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 in green and the black quota column.

If the target column is 2650 and the third one is the quota, it equals 80% to 100% of those 2650 the label should be blue, if the percentage is between 20% to 79% orange and 19% a 0% in red.

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

For your help, thank you very much.

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 html highcharts

asked by raintrooper 11.01.2018 в 15:12

source

1 answer

How to simultaneously play two PCM audio streams in a DMA Apache server Directive Location

score 1 · Accepted Answer

I could 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>