CODEWITHSUNDEEP
highcharts
gdm
gdm

Reputation: 7928

Highchartjs SubPlots not correctly stacked

I whish two plots stacked vertically:

chart = new Highcharts.chart({
    chart: {
      renderTo: 'prod',
      defaultSeriesType: 'spline'
    },    
    title: {
      text: 'Sums'
    },
    xAxis: {
      type: 'datetime',
      labels: {
        formatter: function() {
          return Highcharts.dateFormat('%A %e - %b - %Y  %k:%M ', this.value);
        }
      }
     
    },
    yAxis: [{
      title: {
          text: 'Plot1'
      },
      height: '25%',
      offset: 0,
      lineWidth: 1,
      tickInterval: 50,
      labels: {
          formatter: function () {
              var ret = this.value;
              if(ret <= 50)
                  return ret;
          }
      }
    },{
      title: {
          text: 'Plot2'
      },
      top: '25%',
      height: '25%',
      offset: 0,
      lineWidth: 1,
      tickInterval: 50,
      
  }],
    legend:false,
    series: [
      {
        name:'plot1',
        data:data1,
        yAxis:0
      },
      {
        name:'plot2',
        data:data2,
        yAxis:1
      }
    ]  
  });

But what I get is this:

enter image description here

How can I remove the blanck space between the last plot and the xAxis?

Upvotes: 0

Views: 90

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You need to correctly set height and top for y-axis:

    yAxis: [{
        height: '50%',
        ...
    }, {
        top: '50%',
        height: '50%',
        ...

    }]

Live demo: http://jsfiddle.net/BlackLabel/j5hkcr8y/

API Reference:

https://api.highcharts.com/highcharts/yAxis.top

https://api.highcharts.com/highcharts/yAxis.height

Upvotes: 1

Related Questions