Extending line/area chart lines to chart edges

Question

I'm working on a custom-styled line/area chart, based on this reference image:

I have most implemented, but, I'm struggling with the lines getting extended to the edges of the chart.

Here is my fiddle: http://jsbin.com/ePilePe/3/edit?js,output

As you can see in the image, the first point, the last point on X axis has a ray extending to the end of the chart, where in my fiddle there is no such thing.

I've been digging through the API, docs for quite some time now, but cannot find any relevant information.

How would I achieve such behavior?

Answer 1

After a little bit of fiddling around, I hacked my way around Highcharts to get the desired effect.

Here is my fiddle: http://jsbin.com/upUFIbO/1/.

What I did, is, add the following as callback for load and redraw events:

/**
 * Helper that extends area and lines to the left and right plot edges.
 *
 * Has to be invoked with .call(), giving Highchart as the this reference
 * and Highchart event as the second parameter.
 * 
 * @return void
 */
var edgeExtend = function(e)
{
  for (var l = this.series.length, i = 0; i< l; i++)
  {
    // Get current series.
    var series = this.series[i];

    // Get inner-chart box.
    var box = this.plotBox;

    // Take areas path.
    var areaPath = series.areaPath;

    // Add start point.
    // Right after the first element (M).
    areaPath.splice(1, 0, 0, areaPath[2], 'L');

    // Add Last points upper area end.
    // Remove penultimate point.
    // Replace it with a new point reaching to the width of chart and growing to the height of last element.
    // And add the bottom-right corner.
    areaPath.splice(-6, 3, 'L', box.width, areaPath[areaPath.length - 7], 'L', box.width, box.height);

    // Make the last points X be zero - that will result in bottom left corner.
    areaPath[areaPath.length - 2] = 0;

    // Replace value (redraw).
    series.area.element.attributes.d.value = areaPath.join(' ');

    var graphPath = series.graphPath;

    // Add start point.
    // Right after the first element (M).
    graphPath.splice(1, 0, 0, graphPath[2], 'L');

    // Add end point.
    graphPath.push('L', box.width, graphPath[graphPath.length - 1]);

    series.graph.element.attributes.d.value = graphPath.join(' ');
  }
};

Might be that this is no the best way to do it, but hey, you cannot go wrong with direct vector path manipulations.

If anyone has a more "user-friendly" solution to the problem, I'd like to see it.

Answer 2

My earlier comment missed the fact that this is a categorized axis.

In that case, I would simply affect the min and max. If you have a set number of categories, you can set this explicitly (in this case, min=0.5, max=5.5).

If they are dynamic, you can easily calculate them:

var cats=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
var xMin = 0.5;
var xMax = (cats.length -1.5);

full example:

• http://jsfiddle.net/jlbriggs/Q46B8/

If you are not using a categorized axis, you can follow the advice in my original comment:

add minPadding:0 and maxPadding:0 to the xAxis properties. If your data does not end on a tickmark, then you will also want to add startOnTick:false and endOnTick:false