CODEWITHSUNDEEP
highchartsbar-chart
prabhat kumar jena
prabhat kumar jena

Reputation: 13979

Highcharts: Bar column alignment in x-axis in uniform manner

enter image description here

Above diagram is generated by my using options given below:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Browser market shares. January, 2018'
    },
    subtitle: {
        text: 'Click the columns to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
    },
    accessibility: {
        announceNewData: {
            enabled: true
        }
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        title: {
            text: 'Total percent market share'
        }

    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '{point.y:.1f}%'
            }
        }
    },

    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },

    series: [
    {name: "Data A", data: [4], _colorIndex: 0},
    {name: "Data B", data: [7], _colorIndex: 1},
    {name: "Data C", data: [9], _colorIndex: 2},
    {name: "Data D", data: [19], _colorIndex: 3}
]
});

Currently, The issue is the column generated is stacked automatically in the middle. My requirement is, it must uniformly distribute along the x-axis from start to end. Is there any option available for that? Any help will be highly appreciated.

Upvotes: 0

Views: 686

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

You can achieve this effect by rendering all your columns as data of the one series (not each point as a separate series).

  series: [{
    name: '',
    data: [{
      name: "Data A",
      y: 4
    }, {
      name: "Data B",
      y: 7
    }, {
      name: "Data C",
      y: 9
    }, {
      name: "Data D",
      y: 19
    }],
    colorByPoint: true
  }]

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

Upvotes: 1

Related Questions