jquery - Highcharts: Remove extra margin y-axis when plotting multiple series -

i have chart 2 different datetime series, first series linear , holds monthly values while second series column series , holds 1 value per year.

when display both series in 1 chart (one x-axis [datetime], 2 y-axes) first plot not drawn on left side padding y-axis (see example here).

series: [{         name: 'monthly',         type: 'line',         yaxis: 0,         data: [             [date.utc(2012, 0, 31), 11],             [date.utc(2012, 1, 28), 12],             [date.utc(2012, 2, 31), 13],             (...etc...)             [date.utc(2014, 9, 31), 22],             [date.utc(2014, 10, 30), 21],             [date.utc(2014, 11, 31), 20]         ]     }, {         name: 'yearly',         type: 'column',         yaxis: 1,         data: [             [date.utc(2012, 5, 30), 16],             [date.utc(2013, 5, 30), 17],             [date.utc(2014, 5, 30), 18]         ]     }] 

if put linear series in chart (like this), plots being nicely put left , right extremes of chart. want achieve linear/column combination well.

can help? in advance.

this problem occurs because second series 'yearly', has data point in middle of year. highcharts first calculate intervals of different series. in case, therefore scales x-axis according interval of second series, in years:

        [date.utc(2012, 5, 30), 16],            [date.utc(2013, 5, 30), 17],   // year after last datapoint         [date.utc(2014, 5, 30), 18]    // year after last datapoint 

then, try put x-axis starting point @ such datapoint: date.utc(2012, 5, 30) (the first 1 preferably). problem: first series starts before datapoint , has smaller interval between datapoints. highcharts choose largest interval (years in case) , try find interval below lowest datapoint.

for case therefore:

date.utc(2012, 0, 31) - year (lowest datapoint)     (largest interval) 

same holds upper limit of x-axis.

i have found way calculate difference , compensate it:

var begin        = date.utc(2012, 0, 31);     // earliest/first time of both series var end          = date.utc(2014, 11, 31);    // latest/last time of both series var beginlargest = date.utc(2012, 5, 30);     // first time of series                                               // .. largest interval between datapoints var endlargest   = date.utc(2014, 5, 30);     // last time of series                                               // .. largest interval between datapoints  var yearrange    = (end - begin)/(365*60*60*24*1000); var yearbegextra = (beginlargest - begin)/(365*60*60*24*1000); var yearendextra = (endlargest - end)/(365*60*60*24*1000);  var marginbegin  = yearbegextra / yearrange; var marginend    = yearendextra / yearrange; 

now can compensate margin follows:

xaxis: {     type: 'datetime',     minpadding: -marginbegin + 0.005,    // +0.005 give little padding     maxpadding: marginend    + 0.005    // .. allows see ticks 2012 & 2015 }, .. 

this gives chart expected.

demo