0

tengo un gráfico de barras, así:

Gráfico barras

Me gustaría poder cambiar el color de cada barra libremente. es decir si yo tengo los siguientes valores:

series: [{
    name: 'Tokyo',
    data: [49.9, 71.5]

}, {
    name: 'New York',
    data: [83.6, 78.8]

}, {
    name: 'London',
    data: [48.9, 38.8]

}, {
    name: 'Berlin',
    data: [42.4, 33.2]

}]

Por ejemplo para el mes de Enero, para la medida de Tokyo poder cambiar el color del valor 30 al 45.

Algo parecido a:

introducir la descripción de la imagen aquí

¿Es posible cambiar el color un rango concreto?

1 respuesta 1

2

No se si esto se aproxima a lo que quieres lograr... Espero que te sirva.

En caso contrario, puedes probar con otro tipo de gráfico

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    xAxis: {
        categories: [
            'Tokyo',
            'New York',
            'London',
            'Berlín'
          ]
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'Range3',
        data: [20, 50, 10, 12]

    }, {
        name: 'Range2',
        data: [15, 10, 25, 35]

    }, {
        name: 'Range1',
        data: [30, 20, 45, 20]

    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

1
  • Ya vi ese gráfico, pero no me vale necesito que sea uno normal y poder establecer colores por medidas.
    – nachfren
    Commented el 10 ene. 2019 a las 8:43

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.