CODEWITHSUNDEEP
javascriptjsonchartshighcharts
Chris Barr
Chris Barr

Reputation: 34093

Multiple series data on HighCharts column

I'm using HighCharts on a project, and I'm having trouble formatting the data in the way I'd like. I currently have something that works, but it doesn't feel quite right.

What I have is a column chart with everything in one series. I'd rather have each data point be in it's own series & properly labeled in the legend & tooltips. Below are samples of the relevant bits to format the data.

I'm not sure what I'm doing wrong, the changes I've made feel like they should work given their docs & this demo. Also, Do I need the categories if multiple series works?

Working:

"series": [
    {
      "data": [
        {
          "y": 92,
          "name": "Apples: 92ms for 83,481,430 requests",
          "color": "#91cb73"
        },
        {
          "y": 761,
          "name": "Bananas: 761ms for 58,050,877 requests",
          "color": "#ab7053"
        },
        {
          "y": 774,
          "name": "Kiwis: 774ms for 362,294 requests",
          "color": "#44719c"
        }
      ]
   }
]

Demo: http://jsfiddle.net/b65kp/

Not working:

 "series": [
    {
      "name": "Apples",
      "data": {
        "y": 92,
        "name": "92ms for 83,481,430 requests",
        "color": "#91cb73"
      }
    },
    {
      "name": "Bananas",
      "data": {
        "y": 761,
        "name": "761ms for 58,050,877 requests",
        "color": "#ab7053"
      }
    },
    {
      "name": "Kiwis",
      "data": {
        "y": 774,
        "name": "774ms for 362,294 requests",
        "color": "#44719c"
      }
    }
]

Demo: http://jsfiddle.net/u74Qw/1/

Upvotes: 2

Views: 7392

Answers (2)

jlbriggs
jlbriggs

Reputation: 17800

FWIW, alternate approach to setting this up:

http://jsfiddle.net/jlbriggs/zbW4D/

Things to consider:

1) using a legend instead of just directly labeling each bar makes the user do a lot of looking back and forth to see which is which (doing both just adds extra clutter to distract the user)

2) rotating labels always adds more work for the user

3) multiple colors for the bars is not necessary when each bar is labeled appropriately, and again just adds distraction

A horizontal bar chart with no legend and single color for data solves these problems.

Upvotes: 2

musefan
musefan

Reputation: 48435

The problem is that "data" expects an array, and you are giving it an object. Wrap each object in an array. For example:

"data": [{
        "y": 92,
        "name": "92ms for 83,481,430 requests",
        "color": "#91cb73"
 }]

Here is your full fix, but it might not give the result you expect, personally I like your first attempt better

Upvotes: 4

Related Questions