Блог

Codepen: https://codepen.io/Lothain/pen/GRjBOyw

   chart: {
    type: 'column'
    
  },
  title: {
    text: 'Job Billings By Month'
  },
  xAxis: {
    categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',]
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Cost in USD'
    }
  },
  legend: {
    reversed: true
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    },
    area: {
      marker: {
        enabled: false
      },
      lineColor: 'rgb(205,70,43)',
      fillColor: 'rgb(240,198,189)'
    }
  },
  series: [{
    name: 'Tamp;M',
    data: [5, 3, 4, 7, 2, 4, 2, 5, 2, 8, 11, 3],
    color: 'rgb(208,224,227)'
  }, {
    name: 'Workorder',
    data: [2, 2, 3, 2, 1, 3, 4, 4, 2, 5, 4, 2],
    color: 'rgb(207,226,243)'
  }, {
    name: 'Change Order',
    data: [3, 4, 4, 2, 5, 4, 2, 5, 2, 8, 8, 2],
    color: 'rgb(201,218,248)'
  }, {
    name: 'Main Contract',
    data: [3, 4, 4, 2, 5, 2, 8, 11, 3, 4, 8, 3],
    color: 'rgb(164,194,244)'
  }, {
    name: 'Projected Billed',
    type: 'line',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    color: 'rgb(255,109,1)'
  }, {
    name: 'Cost',
    type: 'area',
    step: 'center',
    color: 'red',
    opacity: .5,
    data: [4,4, 5, 3, 1, 4, 7, 5, 3, 2, 5, 9]
  }]
});
 

Цель: https://imgur.com/a/Vo7ORj7

Я бы хотел, чтобы ряд областей-шагов простирался до краев оси x, а не заканчивался в середине столбца, который они перекрывают. Я уверен, что это возможно, но я не знаю как; Я пытался использовать опцию series.type.area.step (center, left, right) безрезультатно.

Вы можете добавить еще один area ряд с теми же данными, что и текущий, но также с приведенными ниже параметрами:

     series: [..., {
        name: 'Cost',
        type: 'area',
        step: 'center',
        color: 'red',
        lineWidth: 0,
        zIndex: -1,
        data: [4000, 4000, 5000, 3000, 1000, 4000, 7000, 5000, 3000, 2000, 5000, 9000]
    }, {
        linkedTo: ':previous',
        stacking: false,
        type: 'area',
        step: 'center',
        color: 'red',
        fillColor: 'transparent',
        data: [4000, 4000, 5000, 3000, 1000, 4000, 7000, 5000, 3000, 2000, 5000, 9000]
    }]
 

Живая демонстрация: http://jsfiddle.net/blackLabel/m6gsrn8o/

Ссылка на API: https://api.highcharts.com/highcharts/series.area