CODEWITHSUNDEEP
highcharts
Andreas Köberle
Andreas Köberle

Reputation: 111042

How to render a bar chart with different series with only one entry per category in HighCharts

I have a chart with to series of data for a bunch of categories, every category only have values for one of the series:

enter image description here

The problem is that the bars don't start in the center of the category but on the begin or end, depending if its in first or the second series.

Is there a way to start the bar in center?

Example: http://jsfiddle.net/ms1kfrox/

Chart settings: 

{
  chart: {
    type: 'bar'
  },
  xAxis: {
    categories: ['A', 'B', 'C', 'D', 'E'],
    title: {
      text: null
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Population (millions)',
      align: 'high'
    },
    labels: {
      overflow: 'justify'
    }
  },
  tooltip: {
    valueSuffix: ' millions'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        padding: 0,
        enabled: true
      }
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 100,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Type1',
    data: [null, {
        y: 870
      },
      null, {
        y: 408
      },
      null
    ]
  }, {
    name: 'Type2',
    data: [{
        y: 973
      },
      null, {
        y: 680
      },
      null, {
        y: 34
      }
    ]
  }]
}

Upvotes: 0

Views: 454

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can set grouping:false in plotOptions / bar object.

Example: http://jsfiddle.net/ms1kfrox/1/

Upvotes: 1

Related Questions