0

I'm trying to set the color of each individual bar to a different color in a multi series highCharts graphs.

here is the data as it comes in: 

{
    "yAxisText": "",
    "yAxisUnit": "%",
    "statusCode": "OK",
    "chartType": "column",
    "categories": [
        "Basic",
        "1",
        "2",
        "3+",
        "4+"
    ],
    "options": [
        {
            "name": "test1",
            "data": [
                56.6,
                17.3,
                8.6,
                17.5,
                12
            ]
        },
        {
            "name": "test2",
            "data": [
                46.5,
                16,
                15.4,
                22.1,
                33
            ]
        }
    ]
}

I'm able to make each data set a different color or each category a different color, but I can't figure out how to make each individual bar a different color.
So essentially for this data there would be 8 bars with 8 different colors. Thanks in advance!

MorKadosh
  • 5,846
  • 3
  • 25
  • 37
yoleg
  • 371
  • 3
  • 12
  • Possible duplicate of [set different colors for each column in highcharts](http://stackoverflow.com/questions/7737409/set-different-colors-for-each-column-in-highcharts) – Shanoor Oct 11 '15 at 05:15
  • Here you go, it's a mix of few options: http://stackoverflow.com/a/16169440/5388620 – Shanoor Oct 11 '15 at 05:17
  • thanks, I don't think it was a duplicate of those. – yoleg Oct 13 '15 at 20:17

1 Answers1

1

You can set array of colors and then apply each color per poiny by colorByPoint option.

{
   colors:['blue','red','green']
},
series:[{
   colorByPoint: true,
   data:[1,2,3]
}]
Sebastian Bochan
  • 37,348
  • 3
  • 49
  • 75
  • That's not quite what I am looking for. I made this [JSFiddle](http://jsfiddle.net/yoleg24/yb5f6rsL/) to demonstrate what I am currently getting. What I would like is for each individual bar to be a different color. So in this fiddle there would be 10 different colored bars. Thanks! – yoleg Oct 12 '15 at 16:55
  • You can prepare an array of points and then in the load event, call update action on each column. Example: http://jsfiddle.net/yb5f6rsL/2/ – Sebastian Bochan Oct 13 '15 at 11:27
  • Great. This is exactly what I was looking for. Thanks! – yoleg Oct 13 '15 at 16:49