CODEWITHSUNDEEP
javascripthighcharts
user1503606
user1503606

Reputation: 4300

Space at the bottom of highcharts

I have the following highcharts setup and there is a space at the bottom above the xAxis can someone tell me the best way to resolve this offset is not a solution for me.

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column',
      animation: true,
      verticalAlign: 'bottom',
      backgroundColor: "#ffffff"
    },
    legend: {
      enabled: true,
      verticalAlign: 'bottom',
      align: 'center',
    },
    xAxis: {
      type: 'datetime',
      //tickInterval: 3600 * 1000,
      //min: Date.UTC(2016, 9, 3),
      //max: Date.UTC(2016, 9, 4),
      dateTimeLabelFormats: {
        day: '%H'
      }
    },
    yAxis: {
      title: {
        text: null
      },
      minPadding: 0,
      maxPadding: 0,
       min: 0,
            max: 3,
      minRange: 0.1,
      tickInterval: 1,
      gridLineWidth: 0,
      categories: ["", "Short", "Medium", "High", "Long"],
    },
    colors: ["#bb2e33", "#fac300", "#68a92a"],
    series: [{
      name: 'Severe',
      pointStart: Date.UTC(2016, 9, 3),
      pointInterval: 24 * 3600 * 1000,
      data: [
        [1475482200000, 3],
        [1475489685000, 1],
        [1475489693000, 1],
        [1475489704000, 1],
        [1475490071000, 3]
      ],
      //stack: 'week'
    }, {
      name: 'Moderate',
      pointStart: Date.UTC(2016, 9, 3),
      pointInterval: 24 * 3600 * 1000,
      data: [
        [1475472600000, 2],
        [1475489685000, 2],
        [1475489693000, 2],
        [1475489704000, 2],
        [1475490071000, 2],
        [1475490071000, 2],
        [1475490071000, 1]
      ],
      //stack: 'week'
    }, {
      name: 'Mild',
      pointStart: Date.UTC(2016, 9, 3),
      pointInterval: 24 * 3600 * 1000,
      data: [
        [1475472600000, 1],
        [1475489685000, 3],
        [1475489693000, 2],
        [1475489704000, 1],
        [1475490071000, 1]
      ],
      //stack: 'week'
    }]
  });
});

Example below http://jsfiddle.net/93Xcu/373/

Upvotes: 0

Views: 31

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

I think that in case of your chart you can use pointPlacement parameter, for setting your column placement just like you want:

plotOptions: {
  series: {
    pointPlacement: 'on'
  }
},

Here you can read about this parameter in Highcharts API http://api.highcharts.com/highcharts/plotOptions.column.pointPlacement

And here you can see an example how it can work: http://jsfiddle.net/93Xcu/374/

Upvotes: 1

Related Questions