Верхний график: добавление данных для последней точки левой ступенчатой ​​области

Question

Когда последнее значение в левой ступенчатой ​​области отличается от предыдущего, его трудно увидеть.(мы видим только линию в конце графика)

Демо: https://jsfiddle.net/x2qf5wuy/1/

$("#container").highcharts({
    chart: {
        type: 'area'
    },

    plotOptions: {
        area: {
            stacking: 'normal',
            step: 'left'
        }
    },
    series: [{
        name: "Example 1",
        data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 0]
    }, {
        name: "Example 2",
        data: [0, 1, 1, 1, 1, 2, 2, 2, 3, 3, 4, 2, 1, 1, 0, 0, 0, 0, 10]
    }]
});

Естьспособ в старшей диаграмме добавить искусственное заполнение в ряд данных так, чтобы пользователь мог видеть последнюю точку?

Требуемый результат:

Answer 1

Вы можете добавить точку с тем же значением y, что и у последней серии, и использовать метод setExtremes, чтобы отобразить только нужную часть area:

chart: {
    type: 'area',
    events: {
        load: function() {
            var series = this.series[1],
                lastPoint = series.data[series.data.length - 1];

            series.addPoint({
                x: lastPoint.x + 100,
                y: lastPoint.y
            }, false);
            this.xAxis[0].setExtremes(null, lastPoint.x + 0.5);
        }
    }
},

* 1007.* Живая демоверсия: https://jsfiddle.net/BlackLabel/54a6jdgy/

Справочник по API:

https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes