CODEWITHSUNDEEP
highcharts
Michael Witt
Michael Witt

Reputation: 1712

Highcharts bar chart force bar to use space

I need to put some highcharts bar charts into a tight space. Therefore, I specify the max of yAxis to be the same as the value of the greatest bar. In some cases, this causes the bar to use all the available space on the chart. In other cases it does not. How can I get it to always use all the available space? In the following jsfiddle, I am setting the max to 13 (and the max in the data is also 13). If changed to 4, then the bar uses all space.

Here is the max:

"yAxis": {
  "min": 0,
  "max": 13,

and the data:

"data": [0, 0, 1, 13, 0, 0, 0]

http://jsfiddle.net/MichaelWitt/2ksq39g3/2/

Here is the gap: enter image description here

When I set the pertinent values to 4, I don't get this gap:enter image description here

Upvotes: 0

Views: 366

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

Add "endOnTick": false, in yAxis options. For more details see here 

Highcharts.chart('container', {
  "global": {
    "useUTC": false,
    "timezoneOffset": -5
  },
  "chart": {
    "type": "bar",
    "height": 200,
    "marginLeft": 110,
    "marginRight": 0,
    "spacingLeft": 0,
    "spacingRight": 0,
    "style": {
      "fontFamily": "Arial",
      "fontSize": 14
    }
  },
  "tooltip": {
    "enabled": false
  },
  "exporting": {
    "enabled": false
  },
  "title": {
    "text": "",
    "style": {
      "display": "none"
    }
  },
  "subtitle": {
    "text": "",
    "style": {
      "display": "none"
    }
  },
  "legend": {
    "enabled": false
  },
  "xAxis": {
    "categories": ["x", "y", "z", "a", "b", "c", "d"],
    "labels": {
      "style": {
        "fontFamily": "Arial",
        "fontSize": "14px"
      }
    },
    "title": {
      "text": null
    },
    "minorTickLength": 0,
    "tickLength": 0
  },
  "yAxis": {
    "min": 0,
    "max": 13,
    "labels": {
      //"enabled": false  /*un comment this*/
    },
    "gridLineWidth": 0,
    "minorTickLength": 0,
    "tickLength": 0,
    "endOnTick": false, /*added*/
    "title": {
      "text": null
    }
  },
  "plotOptions": {
    "bar": {
      "dataLabels": {
        "enabled": false,
        "align": "left",
        "inside": true,
        "style": {
          "color": "white",
          "fontSize": "12px",
          "fontFamily": "Arial",
          "textShadow": false
        },
        "shadow": false
      }
    }
  },
  "credits": {
    "enabled": false
  },
  "series": [{
    "pointWidth": 22,
    "name": "Medium",
    "color": "#FFC627",
    "data": [0, 0, 1, 13, 0, 0, 0]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Upvotes: 2

Related Questions