Фоновые столбцы в линейной диаграмме

Question

Мне нужно сделать такой график

изображение

График линейной диаграммы уже создан с его легендой и меткой оси. Отсутствуют только столбцы. Понятия не имею, как это сделать, не могли бы вы мне помочь?

Answer 1

Я использую plotBands на xAxis, чтобы создать нечто подобное. Смешивание его с вашим проектом должно дать желаемый результат.

xAxis: {
    plotBands: [{
            borderColor: 'grey',
        borderWidth: 3,
        color: '#FCFFC5',
        from: Date.UTC(2019, 02, 2),
        to: Date.UTC(2019, 02, 4)
    }, { // mark the weekend
        color: '#FCFFC5',
        from: Date.UTC(2019, 02, 9),
        to: Date.UTC(2019, 02, 11)
    }, { // mark the weekend
        color: '#FCFFC5',
        from: Date.UTC(2019, 02, 16),
        to: Date.UTC(2019, 02, 18)
    }, { // mark the weekend
        color: '#FCFFC5',
        from: Date.UTC(2019, 02, 23),
        to: Date.UTC(2019, 02, 25)
    }, { // mark the weekend
        color: '#FCFFC5',
        from: Date.UTC(2019, 02, 30),
        to: Date.UTC(2019, 03, 1)
    }],
    tickInterval: 24 * 3600 * 1000, // one day
    type: 'datetime',
},

Ссылка на демо