Revision history [back]

To extend multiple lines along the x-axis in Highcharts, follow these steps:

1. Create a chart with multiple series or lines using the Highcharts code.

2. Set the x-axis options to allow for the desired extent of line extension, including the minimum and maximum values for the x-axis, the tick interval, and any other desired options.

3. Use the Highcharts API to modify the chart's series data, by adding or removing data points, in order to extend the lines along the x-axis.

4. Once the data has been updated, use the Highcharts chart update method to redraw the chart with the updated data and axis options.

Example:

Here's an example of how to extend two lines with data to cover a wider range on the x-axis:

var chart = Highcharts.chart('container', {
    xAxis: {
        min: 0,
        max: 10,
        tickInterval: 1
    },
    series: [{
        name: 'Line 1',
        data: [5, 4, 3, 2, 1]
    }, {
        name: 'Line 2',
        data: [3, 2, 1, 0, -1]
    }]
});

// To extend the lines to cover the range from 0 to 20 on the x-axis,
// add new data points to each series:
chart.series[0].addPoint([6, 0]);
chart.series[0].addPoint([7, 1]);
chart.series[0].addPoint([8, 2]);
chart.series[0].addPoint([9, 3]);
chart.series[0].addPoint([10, 4]);
chart.series[0].addPoint([11, 5]);
chart.series[1].addPoint([6, 1]);
chart.series[1].addPoint([7, 0]);
chart.series[1].addPoint([8, -1]);
chart.series[1].addPoint([9, -2]);
chart.series[1].addPoint([10, -3]);
chart.series[1].addPoint([11, -4]);

// Then update the chart to redraw with the new data and x-axis settings:
chart.update({
    xAxis: {
        min: 0,
        max: 20,
        tickInterval: 1
    }
});

This will extend the two lines on the chart to cover a wider range on the x-axis, from 0 to 20.