I hope you are very well, I have the following problem:
I am graphing some columns with the Highcharts library, the problem I have is how can I do it so that when adding other columns that have higher values they are left behind, this is my example graph:
Highcharts.chart('container', {
chart: {
type: 'variwide'
},
title: {
text: 'TIEMPOS DE ATENCIÓN TODAS LAS FLOTAS'
},
subtitle: {
text: 'Período 2019'
},
//*Aqui muestro el eje X con sus categorias*//
xAxis: {
categories: ['Daño por roca 60%','Rotar 15%','Corrección presión de inflado 10%','Falla reparación 7%','Desgaste irregular 4%','B-TAG 2%','Apareamiento 1%','Desgaste total 1%'],
labels: {
rotation: -50
}
},
yAxis: {
title: {
text: 'Tiempo'
}
},
caption: {
text: ''
},
legend: {
enabled: false
},
//*Aqui estan las columnas principales*//
series: [{
name: 'Tiempo de atención',
data: [
['Daño por roca', 2.1, 88],
['Rotar', 1.6, 22],
['Corrección presión de inflado', 1.5, 15],
['Falla reparación', 1.9, 11],
['Desgaste irregular', 2, 5],
['B-TAG', 1, 3],
['Apareamiento', 1, 2],
['Desgaste total', 1, 1]
],
dataLabels: {
enabled: true,
},
tooltip: {
pointFormat: 'Tiempo de atención: <b> {point.y}</b><br>' +
'Equipos: <b> {point.z} </b><br>'
},
colorByPoint: true
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>
<div id="container"></div>
and the values of the other columns that should be behind the main columns would be the following:
//*Aqui están las columnas segundarías que deben quedar detrás de las columnas principales*//
data: [
['Daño por roca', 3.9, 88],
['Rotar', 3.3, 22],
['Corrección presión de inflado', 3.3, 15],
['Falla reparación', 3.6, 11],
['Desgaste irregular', 4, 5],
['B-TAG', 3.7, 3],
['Apareamiento', 3, 2],
['Desgaste total', 4, 1]
]
If anyone can help me, it would be a great help.
You can achieve this by changing the color of the series and using it
grouping: false
likeplotOptions
so: