I have the case of a graph, which defines the colors that can be used in an array.
colors: ['#01579B', '#0288D1', '#03A9F4', '#4FC3F7', '#81D4FA', '#DCE775', '#FFB74D', '#FFEE58', '#0277BD', '#4DB6AC', '#00E5FF']
The problem is that in some cases it respects order, and in others it does not. Since it starts not with the first defined color. This problem I only have with the graph of combined columns.
The case that does respect the colors is:
and the one that does not respect the colors:
If someone could tell me what my mistake is so that all the graphics can use the same order of colors, very grateful.
Snippet where the graph does respect the colors:
var contador = 0;
var porcentajes = [
85.3,
85.3,
85.3,
85.3,
85.3,
85.3,
85.3,
];
Highcharts.chart('grafico0', {
colors: ['#01579B', '#0288D1', '#03A9F4', '#4FC3F7', '#81D4FA', '#DCE775', '#FFB74D', '#FFEE58', '#0277BD', '#4DB6AC', '#00E5FF'],
chart: {
type: 'column'
},
title: {
text: 'Eficiencia de Equipos de Aspersión, 01-Zona 1, Semana :15-12/02/2018 al 18/02/2018'
},
xAxis: {
title: {
enabled: true,
text: ''
},
categories: ['05/02/2018 </br> 29064 ', '06/02/2018 </br> 29064 ', '07/02/2018 </br> 29064 ', '08/02/2018 </br> 29064 ', '09/02/2018 </br> 29064 ', '10/02/2018 </br> 29064 ', '11/02/2018 </br> 29064 ', ]
},
yAxis: [{
tickInterval: 1,
labels: {
formatter: function() {
var porcentaje = this.value * 100 / 24;
return Highcharts.numberFormat(porcentaje, 2, '.', ',');
}
},
min: 0,
max: 24,
title: {
text: 'Porcentajes'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
}
}
}, {
min: 0,
max: 10,
title: {
text: 'Porcentajes'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
}
},
opposite: true
}],
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
spline: {
dataLabels: {
enabled: true,
formatter: function() {
var porcentajeLabel = porcentajes[contador];
contador += 1;
return '<span style="color: #D500F9;">' + porcentajeLabel + '%</span>';
},
}
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'black'
}
}
},
series: [{
name: '62-Operando Sin Horometro ',
data: [
13.50,
0,
0,
0,
0,
0,
0,
],
index: 1,
legendIndex: 13
},
{
name: '57-Traslado Equipo De Riego Con Tractor ',
data: [
6.00,
0,
0,
0,
3.00,
0,
0,
],
index: 1,
legendIndex: 12
},
{
name: '43-Cambios De Posicion ',
data: [
3.00,
2.00,
2.00,
2.00,
6.00,
0,
0,
],
index: 1,
legendIndex: 11
},
{
name: '42-Instalación De Equipo ',
data: [
0,
0,
1.00,
2.00,
0,
0,
2.00,
],
index: 1,
legendIndex: 10
},
{
name: '41-Problemas Con Accesorios ',
data: [
0,
0,
2.70,
0,
0,
0,
0,
],
index: 1,
legendIndex: 9
},
{
name: '18-Instalacion de equipos de riego ',
data: [
0,
0,
1.00,
0,
6.00,
0,
0,
],
index: 1,
legendIndex: 8
},
{
name: '17-Falta de Agua ',
data: [
0,
0,
0,
2.80,
0,
0,
0,
],
index: 1,
legendIndex: 7
},
{
name: '06-Falta de Combustible ',
data: [
0,
16.00,
0,
0,
0,
24.00,
16.00,
],
index: 1,
legendIndex: 6
},
{
name: '01-Operación ',
data: [
1.50,
6.00,
17.30,
17.20,
9.00,
0,
6.00,
],
index: 1,
legendIndex: 5
},
{
name: 'Meta',
type: 'spline',
data: [20.47,
20.47,
20.47,
20.47,
20.47,
20.47,
20.47,
],
color: '#D500F9'
}
]
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="grafico0" style="min-width: 310px; height: 400px; margin: 0 auto"></div>Snippet where the graph does not respect the colors:
var contador = 0;
var porcentajes = [
85.3,
85.3,
85.3,
85.3,
85.3,
85.3,
85.3,
];
Highcharts.chart('grafico0', {
colors: ['#01579B', '#0288D1', '#03A9F4', '#4FC3F7', '#81D4FA', '#DCE775', '#FFB74D', '#FFEE58', '#0277BD', '#4DB6AC', '#00E5FF'],
chart: {
type: 'column'
},
title: {
text: 'Eficiencia de Equipos de Aspersión, 01-Zona 1, Semana :14-05/02/2018 al 11/02/2018'
},
xAxis: {
title: {
enabled: true,
text: ''
},
categories: ['29/01/2018 </br> 29064 ', '30/01/2018 </br> 29064 ', '31/01/2018 </br> 29064 ', '01/02/2018 </br> 29064 ', '02/02/2018 </br> 29064 ', '03/02/2018 </br> 29064 ', '04/02/2018 </br> 29064 ', ]
},
yAxis: [{
tickInterval: 1,
labels: {
formatter: function() {
var porcentaje = this.value * 100 / 24;
return Highcharts.numberFormat(porcentaje, 2, '.', ',');
}
},
min: 0,
max: 24,
title: {
text: 'Porcentajes'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
}
}
}, {
min: 0,
max: 10,
title: {
text: 'Porcentajes'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
}
},
opposite: true
}],
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
spline: {
dataLabels: {
enabled: true,
formatter: function() {
var porcentajeLabel = porcentajes[contador];
contador += 1;
return '<span style="color: #D500F9;">' + porcentajeLabel + '%</span>';
},
}
},
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'black'
}
}
},
series: [{
name: '57-Traslado Equipo De Riego Con Tractor ',
data: [
0,
6.00,
0,
0,
0,
0,
0,
],
index: 1,
legendIndex: 12
},
{
name: '43-Cambios De Posicion ',
data: [
3.00,
2.00,
2.00,
2.00,
4.00,
2.00,
0,
],
index: 1,
legendIndex: 11
},
{
name: '42-Instalación De Equipo ',
data: [
0,
0,
0,
0,
0,
0,
2.00,
],
index: 1,
legendIndex: 10
},
{
name: '41-Problemas Con Accesorios ',
data: [
3.00,
0,
2.00,
3.00,
2.00,
2.00,
2.00,
],
index: 1,
legendIndex: 9
},
{
name: '18-Instalacion de equipos de riego ',
data: [
0,
6.00,
0,
0,
0,
0,
0,
],
index: 1,
legendIndex: 8
},
{
name: '17-Falta de Agua ',
data: [
0,
4.00,
2.00,
0,
0,
2.00,
2.00,
],
index: 1,
legendIndex: 7
},
{
name: '08-Mantenimiento/servicio ',
data: [
0,
0,
0,
1.00,
0,
0,
0,
],
index: 1,
legendIndex: 6
},
{
name: '01-Operación ',
data: [
18.00,
6.00,
18.00,
18.00,
18.00,
18.00,
18.00,
],
index: 1,
legendIndex: 5
},
{
name: 'Meta',
type: 'spline',
data: [20.47,
20.47,
20.47,
20.47,
20.47,
20.47,
20.47,
],
color: '#D500F9'
}
]
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="grafico0" style="min-width: 310px; height: 400px; margin: 0 auto"></div>