5

Estoy construyendo unos gráficos con Highcharts, pero tengo problemas para cambiar los colores de las barras de dicho gráfico, colocando colorByPoint en true las barras obtienen un color difrente automaticamente sin posibilidad de escoger cuál color se quiere en cada barra, y colocando colorByPoint en falso se puede elegir el color que uno prefiera utilizando color: '#colordesupreferencia', pero al usar el color de esta manera, todas las barras de la serie toman ese único color. Aquí dejo el código que tengo para que entiendan a qué me refiero

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'bar'
        },

        xAxis: {
            categories: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']
        },

        plotOptions: {
            series: {
                colorByPoint: true
            }
        },

        series: [{
            data: [26, 41.5, 100.5, 11.2, 210.0, 216.0, 137.0, 48.5, 21.4, 194.7, 99.6,156.3]
        }, {
            colorByPoint: false,
            data: [26, 41.5, 100.5, 11.2, 210.0, 216.0, 137.0, 48.5, 21.4, 194.7, 99.6,156.3],
            color: '#F75E25'
        }]
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Necesito cambiar únicamente el color del mes de marzo (ejemplo) en la serie 2, donde todas las barras tienen un único color, ya que no se me ocurre algo más para poder cambiar el color de ese mes en específico.

2 respuestas 2

4

Necesitas alterar las opciones de Highcharts con setOptions asi:

$(function () {
    Highcharts.setOptions({
        colors: ['#058DC7', '#50B432', '#9D561B', '#DDDF00', '#24CBE5', '#64E572', '#9F9655', '#FFF263', '#6AF9C4']
    });
    $('#container').highcharts({

        chart: {
            type: 'bar'
        },

        xAxis: {
            categories: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']
        },

        plotOptions: {
            series: {
                colorByPoint: true
            }
        },

        series: [{
            data: [26, 41.5, 100.5, 11.2, 210.0, 216.0, 137.0, 48.5, 21.4, 194.7, 99.6]
        }, {
            colorByPoint: false,
            data: [26, 41.5, 100.5, 11.2, 210.0, 216.0, 137.0, 48.5, 21.4, 194.7, 99.6],
            color: '#F75E25'
        }]
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

1
  • 2
    Perfecto, con esto me funciona, muchas gracias!
    – Jesús
    Commented el 27 ago. 2019 a las 15:46
2

La documentación de Highchart dice que la estructura de la data tiene para asignar el valor, los títulos, el color y varias opciones más

data: [{
    y: 1,
    name: "Point2",
    color: "#00FF00"
}, {
    y: 1,
    name: "Point1",
    color: "#FF00FF"
}]

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        }
        ,plotOptions: {
            series: {
                colorByPoint: true
            }
        }
        ,series: [{
            data: [
             { y: 2, name: "Ene", color: "blue" }
            ,{ y: 26, name: "Feb", color: "#FF00FF" }
            ,{ y: 41.5, name: "Mar", color: "#00FF00" }
            ,{ y: 100.5, name: "Abr", color: "#FF00FF" }
            
            ]
        }]
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

1
  • Interesante, este método también es útil, gracias!
    – Jesús
    Commented el 27 ago. 2019 a las 17:08

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.