高图，容器内无填充物

Question

is it possible to have an linechart without the padding left and right? So that the line would be edge to edge, just like in the Design?

At the moment it looks like that

chartOptions: {
chart: {
  type: 'spline',
  spacingBottom: 0,
},
title: null,
legend: {
  enabled: false
},
credits: {
  enabled: false,
},
tooltip: {
  split: true,
  pointFormat: '{point.y} {series.name}',
},
plotOptions: {
  series: {
    shadow: true,
  },
},
xAxis: {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  minPadding: 0,
  maxPadding: 0,
  tickWidth: 0,
  lineWidth: 0,
  crosshair: true,
},
yAxis: {
  visible: false,
},
series: [
  {
    name: 'Bookings',
    data: [43, 44, 43, 42, 42, 41, 42, 43, 45, 44, 42, 43],
  },
  {
    name: 'EUR',
    data: [143, 144, 143, 142, 142, 141, 142, 143, 145, 144, 142, 143],
  },
],

},

Answer 1

Yes, it is possible by adding to "xAxis" configuration object, params "min" and "max", which determines minimum and maximum value of the axis. However, no exactly in your case, because there isn't enough data in series of this chart ( you don't specify the data before January and after December, therefore chart has start point and an end point ).

Here is a piece of configuration code based on yours:

xAxis: {
    categories: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul','Aug', 'Sep', 'Oct', 'Nov', 'Dec', ''],
    minPadding: 0,
    maxPadding: 0,
    tickWidth: 0,
    lineWidth: 0,
    crosshair: true,
    min: 1,
    max: 12
},

series: [
    {
     name: 'Bookings',
     data: [39, 43, 44, 43, 42, 42, 41, 42, 43, 45, 44, 42, 43, 48],
    },
    {
     name: 'EUR',
     data: [141, 143, 144, 143, 142, 142, 141, 142, 143, 145, 144, 142, 143, 148],
    },
],

I added two more categories ( one before 'Jan' and one after 'Dec' ), and two more data positions for both of series objects. Due to set min and max params, chart shows the range only from between this points.

Finally, You should set spacing like this:

chart: {
    type: 'spline',
    spacing: [0,0,10,0]
},  

Lets look on the live working below: JSFiddle

Best regards!