CODEWITHSUNDEEP
javascripthighcharts
mehraG
mehraG

Reputation: 5

Highcharts: How to give a different color to each category in barcharts?

As the question states. I'm trying to give a different color to each category in barcharts. It can be easily done in linecharts where we can pass each series as an object. But I haven't been able to do this on barcharts. Please see the picture to get more clarity.
Also, see demo code how I'm trying to achieve it. It looks something like below. 

xAxis: {
  categories: ['Nominal Bonds', 'Inflation', 'Equity'],
},
series: [
    {
      data: [{ name:'Nominal Bonds 1',y:5 }, { name:'Nominal Bonds 2',y:23}]
    },

    {
     data: [{ name:'Inflation 1',y:15 }, { name:'Inflation 2',y:12}, { name:'Inflation 3',y:22}]
    },

    {
    data: [{ name:'Equity 1',y:35}, { name:'Equity 2',y:21 }, { name:'Equity 3',y:52 }, { name:'Equity 4',y:31}]
    }
]

Any help would be appreciated.

Upvotes: 0

Views: 145

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

You can do it by using this: xAxis.type: 'category'
Pseudo code below:

xAxis: {
  type: 'category',
},
series: [
    {
      data: [{ name:'Nominal Bonds 1',y:5 }, { name:'Nominal Bonds 2',y:23}]
    },

    {
     data: [{ name:'Inflation 1',y:15 }, { name:'Inflation 2',y:12}, { name:'Inflation 3',y:22}]
    },

    {
    data: [{ name:'Equity 1',y:35}, { name:'Equity 2',y:21 }, { name:'Equity 3',y:52 }, { name:'Equity 4',y:31}]
    }
]

Demo: https://jsfiddle.net/BlackLabel/q97vxzct/

Upvotes: 1

Related Questions