1

espero que se encuentren muy bien, tengo el siguiente problema:

Estoy graficando con la libreria de Highcharts unas columnas, el problema que tengo es como le puedo hacer para que al agregar otras columnas que tienen valores mayores queden detrás, esta es mi gráfica de ejemplo:

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>

y los valores de las otras columnas que deberian quedar detras de las principales columnas serian los siguiente:

//*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]

        ]

Si alguien me puede ayudar por favor seria de gran ayuda.

1 respuesta 1

1

Puedes lograrlo cambiandole el color a la serie y usando grouping: false en plotOptions asi:

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
    },
    plotOptions: {
        variwide: {
            grouping: false,
            shadow: false,
            borderWidth: 0,



        }
  },
//*Aqui estan las columnas principales*//
    series: [ {
    colorByPoint: true,
    dataLabels: {
            enabled: true,
        },
    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]

        ]
    },{
        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>'
        },
        color: 'rgba(165,170,217,1)',
        
    },]

});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>

<div id="container"></div>

2
  • 1
    Me sirvio perfectamente, muchisimas gracias alanfcm.
    – estrada
    Commented el 9 sept. 2019 a las 17:41
  • otra cosa, como puedo hacer en esa misma gráfica para que los valores queden en el centro de cada columna?
    – estrada
    Commented el 9 sept. 2019 a las 17:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.