CODEWITHSUNDEEP
javascripthighcharts
anorlondo
anorlondo

Reputation: 407

Remove blank space underneath polar bar chart in Highcharts

I have a polar chart that I've created in Highcharts, which goes from -90 to 90 degrees:

enter image description here

There's a large field of blank space underneath it, I'm assuming because the container is still accounting for a full circle, rather than a half circle.

How can I remove this field of blank space so that the Highcharts logo and the "This text should be right underneath the graph" string is right underneath the graph?

I've created a JS fiddle with the code here: https://jsfiddle.net/1ujbmypx/2/, but I'll include the code below as well:

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
<div>This text should be right underneath the graph.</div>

JavaScript:

Highcharts.chart("container", {

    chart: {
    type: "bar",
    polar: true
  },
  
  title: {
      text: undefined
  },
  
  pane: {
    startAngle: -90,
    endAngle: 90,
    size: "100%"
  },
  
  legend: {
    enabled: false
  },
 
  
  series: [{
    data: [
    {y: 30}, {y: 20}, {y: 25}
    ]
  }]

})

Upvotes: 1

Views: 47

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92314

Not sure if this is the best way, but the following works.

pane: {
    ...
    center: ['50%', '100%']

And then adjust the CSS to move the whole thing up by 50% of the height.

#container {
  height: 500px;
  margin-top: -250px;
}


Highcharts.chart("container", {

    chart: {
    type: "bar",
    polar: true
  },
  
  title: {
      text: undefined
  },
  
  pane: {
    startAngle: -90,
    endAngle: 90,
    size: "90%",
    distance: 200,
    center: ['50%', '100%']
  },
  
  legend: {
    enabled: false
  },
 
  
  series: [{
    data: [
    {y: 30}, {y: 20}, {y: 25}
    ]
  }]

})
#container {
  height: 500px;
  margin-top: -250px;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>
<div>This text should be right underneath the graph.</div>

Upvotes: 0

Related Questions