CODEWITHSUNDEEP
highchartsbar-chartreact-highcharts
doctopus
doctopus

Reputation: 5647

How to remove space in between bars in HighCharts bar chart?

enter image description here

I'm trying to make a simple bar chart using HighCharts.

I'd like to remove the space in between the bars. My research led me to believe that the properties groundPadding and pointPadding were responsible for this space. But setting both to 0 did not change anything.

const config = {
      chart: {
        type: 'bar',
        spacingTop: 0,
        spacingRight: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        // marginTop: 0,
        // marginRight: 0,
        // marginBottom: 0,
        // marginLeft: 0
      },
      title: {
        text: null
      },
      legend: {
        enabled: false
      },
      credits: {
        text: ''
      },
      xAxis: {
        categories: options.map(option => option.option),
        // lineWidth: 0,
        // tickWidth: 0,
      },
      yAxis: {
        title: {
          enabled: false,
        },
        gridLineWidth: 0,
        tickAmount: 0,
        showFirstLabel: false,
        showLastLabel: false
      },
      series: [{
        data: options.map(option => option.votes)
      }],
      plotOptions: {
        bar: {
          dataLabels: {
            enabled: true
          }
        },
        series: {
          pointWidth: 20,
          groundPadding: 0,
          pointPadding: 0
        }
      }
    };

Any ideas?

EDIT:

Not sure if relevant, but the red div wrapping my chart is:

<div style={{ width: '100%', height: '100%', margin: 'auto', border: '2px solid red' }}>
    <ReactHighCharts config={config}></ReactHighCharts>
</div>

And the green div has dimensions: width: 350px and height: 400px

Demo: https://remove-space-between-bar-hbslv6.stackblitz.io

Upvotes: 2

Views: 5544

Answers (2)

pawel_d
pawel_d

Reputation: 3070

You have a mistake in your code. You set groundPadding instead of groupPadding. Also, if you are using pointPadding and groupPadding, setting pointWidth before them will not take effect, as pointWidth is calculated based on these two parameters. If you want to have one width for all points, set only pointWidth property. As for increasing height of the chart each time another point is added, you can check the number of points on load event and change chart size adequately using chart.setSize function. Take a look at the example below.

API Reference:
https://api.highcharts.com/class-reference/Highcharts.Chart.html#setSize

Example:
http://jsfiddle.net/221k5wLh/

Upvotes: 1

Deep 3015
Deep 3015

Reputation: 10075

groundPadding and pointPadding will be inside bar instead of series

plotOptions: {
  bar: {
    groupPadding: 0,
    pointPadding: 0,
    dataLabels: {
      enabled: true,
    }
  }
},

Demo

Upvotes: 4

Related Questions