score:2

Accepted answer

There isn't a single setting that will do this. The points are, by default, aligned in the center of the category. You could set your tickmarkPlacement property from the default of between to on, but this will mess up your column grid.

The best option that I am aware of for this particular scenario is to fake it, by adding a data point to both the beginning and end of your line, at -0.5 of your min x value, and + 0.5 of max x value, respectively, repeating your first and last y value.

So, for example, if your data is:

data: [3,4,7,8,6,5,4,5,4,3,4]

It would then need to be:

data: [{x:-0.5, y: 3},3,4,7,8,6,5,4,5,4,3,4,{x:10.5, y: 4}]

You may need to adjust a few other options as well, depending on your other chart options, such as:

  • x axis min/max

  • plotOptions -> column -> grouping: false

  • plotOptions -> column -> pointRange: 1

Example:

line-to-edge

score:1

Not sure if this directly applies to the court jester's situation, but I had this same edge issue and was able to resolve it in a less hacky way using xAxis.min and xAxis.max:

xAxis: {
  min: 0.5,
  max: yourColumnsArray.length - 1.5,
  ...
}

Related Query

More Query from same tag