A different color for each highcharts column

Asked

Viewed 964 times

0

I have a horizontal bar chart from Highcharts, I would like each bar to have a color, only I mount them only with a series using a database query, in which case I can only pass one color to the whole chart.

I did a lot of research, I couldn’t find anything in Highcharts to help me with that.

php javascript html css highcharts

  • Dude I answered you, but I read your question again, so I posted two ways. "just with a series " is a series or several ?

2 answers

1


To put a different color for each column use the Colors attribute inside series:

series: [{       

        type: 'column',
        colorByPoint: true,
        colors: '#fff',
        name: 'Numero de Chamados',
        data: {[0,1,2,3,4,3,5,4,3,3,3,33,3,3,3,3,3,2]},
        showInLegend: true
    },{       

        type: 'column',
        colorByPoint: true,
        colors: '#000',
        name: 'Numero de Chamados2',
        data: {[0,1,2,13,4,3,1511,4,3,31,3,133,3,13,3,3,3,2]},
        showInLegend: true
    }]

If you use only one series just put this code:

colorByPoint: true,

  • see if this is what you want and let me know, if not I will edit

0

Set the colorByPoint option to true and set the desired color string.

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

example - jsfiddle

Source

Browser other questions tagged php javascript html css highcharts

You are not signed in. Login or sign up in order to post.