Search code examples
javascripthighchartshighcharts-ng

add a bar Highcharts series

I want to add another bar to a category. for example I want to put another bar in Category 1 keeping my structure. but I'm adding data without an array. I do not want to use this structure for example.

         series: [{
          name: 'bar1',
          data: [1000, 950, 920, 0, 850],
          color: "#FF0000"
          }, {
         name: 'bar2',
         data: [800, 770, 750, 0, 730],
         color: "#000000"

         }, {
         name: 'bar3',
         data: [600, 540, 535, 500, 30],
         color: "#00FF00"

         }]

I must use this:

        series: [{
         "data": [{
            "name": "number1",
            "y": 10,
            "color": "#FF0000"
        }, {
            "name": "number2",
            "y": 42,
            "color": "#FFFF00"

        }, {
            "name": "number3",
            "y": 60
        }]
         }]

enter image description here

I do it because I want to customize the name of each bar. but I do not know    how to put another bar in the same category as show in the picture this is my file...

http://jsfiddle.net/v51dxpLn/

enter image description here

I want every bar is assigned a different name and can put it in the same category. so far as I have my exampe I can only have one bar by category. I need to put n bars in a bar every category but still retains its different name.

Solution

  • Solution is to use multiple series, like here: http://jsfiddle.net/awe4abwk/1/

    $('#container').highcharts({
  chart: {
    type: 'bar',
  },
  xAxis: {
    categories: ['Cat 1', 'Cat 2', 'Cat 3']
  },

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      }
    }
  },

  series: [{
    data: [{
      y: 10,
      x: 0,
      name: 'Bar 1'
    }, {
      y: 10,
      x: 1,
      name: 'Bar 2'
    }, {
      y: 10,
      x: 2,
      name: 'Bar 3'
    }]
  }, {
    data: [{
      y: 20,
      x: 0,
      name: 'Bar X'
    }, {
      y: 20,
      x: 1,
      name: 'Bar Y'
    }, {
      y: 20,
      x: 2,
      name: 'Bar Z'
    }]
  }]
});