establecer diferentes colores para cada columna en highcharts

Este artículo fue probado por especialistas para que tengas la seguridad de la exactitud de nuestro post.

Solución:

Aquí hay otra solución con la última versión de Highcharts (actualmente 3.0).

Establezca la opción colorByPoint en true y define la secuencia de colores que quieras.

options = 
    chart: ...,
    plotOptions: 
        column: 
            colorByPoint: true
        
    ,
    colors: [
        '#ff0000',
        '#00ff00',
        '#0000ff'
    ]

Aquí hay un ejemplo basado en Highcharts Column con demostración de etiquetas rotadas

Cuando agrega el valor a series.data, también puede establecer el color usando las opciones de puntos, por ejemplo

series.data.push( y: parseInt(Data[i]), color: '#FF0000' );

Para obtener más detalles sobre las opciones de puntos, consulte https://api.highcharts.com/class-reference/Highcharts.Point#color

Pruebe cualquiera de estos enfoques:

Enfoque 1:

Highcharts.setOptions( colors: ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE'] );

Enfoque 2:

var colors = ['#3B97B2', '#67BC42', '#FF56DE', '#E6D605', '#BC36FE', '#000'];

 $('#bar_chart').highcharts(
        chart: 
            type: 'column'              
        ,
        title: 
            text: ''
        ,
        subtitle: 
            text: ''
        ,
        xAxis: 
            type: 'category'
        ,
        yAxis: 
            title: 
                text: ''
            
        ,
        legend: 
            enabled: false
        ,
        plotOptions: 
            series: 
                borderWidth: 0,
                dataLabels: 
                    enabled: false                       
                
            
        ,         

        series: [
            name: '',
            colorByPoint: true,
            data: [
                name: 'Blue',
                y: 5.78,
                color: colors[0]

            , 
                name: 'Green',
                y: 5.19,
                color: colors[1]

            , 
                name: 'Pink',
                y: 32.11,
                color: colors[2]

            , 
                name: 'Yellow',
                y: 10.04,
                color: colors[3]

            , 
                name: 'Purple',
                y: 19.33,
                color: colors[4]

            ]
        ]
    );

Comentarios y puntuaciones

---

---

Utiliza Nuestro Buscador