Highcharts - Как мне удержать обе точки линии от разделения между двумя гистограммами

Question

Как мне удерживать обе точки / маркеры в линии от разделения между двумя гистограммами, но при этом все еще имеет возможность охватить оба, когда значения превышают начальное значение бара.

В следующем примере вы заметите, чтоесть две серии линий, которые имеют одинаковые значения, и поэтому я хочу, чтобы точки / маркеры располагались одна над другой, но они разделяются между двумя столбцами с накоплением.

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

Моя скрипка: https://jsfiddle.net/gbp5qvzh/58

var mychart = Highcharts.chart(
    'container', {

    chart: {
      type: 'bar',
      height: '400px'
    },

    title: {
      text: null
    },

    xAxis: {
      lineWidth: 0, 
      tickLength: 0,
      opposite: false,
      labels: {
        enabled: false
      }
    },

        yAxis: {
      opposite: true,
      gridLineWidth: 0,
      title: {
        enabled: false
      },
        labels: { 
        enabled: false
      },
      stackLabels: {
        enabled: false,
        formatter: function () {
          return '<div class="barLabel">' + this.axis.chart.xAxis[0].categories[this.x] + '</div>';
        },
        useHTML: true,
        verticalAlign: 'top', 
        align: 'left', 
        style: { 
            fontSize: '16px', 
          fontFamily: 'proxima-nova' 
        }
      }
    },    

    tooltip: {
        enabled: false
    },

        legend: {
        itemStyle: { 
        color: '#000000', 
        fontWeight: 'bold', 
        fontSize: '18px', 
        fontFamily: 'proxima-nova' 
      }
        },

    series: [

/** COMMENT 1 - START **/
        { type: 'bar', 
        name: 'background fller',
        pointWidth: 50,
        data: [6, 5, 7, 3, 6], 
        showInLegend: false, 
        animation: false,
        color: '#dde8f2', 
        dataLabels: { 
            enabled: false 
        }, 
        states: { 
            hover: { 
            enabled: false 
          } 
        } 
        },
/** COMMENT 1 - END **/

      { type: 'bar', 
        name: 'actual value',
        pointWidth: 50,
        data: [4, 5, 3, 7, 4], 
        showInLegend: false, 
        color: '#729bc3', 
        dataLabels: { 
          enabled: true, 
          align: 'left',
          style: { 
            textOutline: false, 
            color: '#000000', 
            fontWeight: 'bold', 
            fontSize: '16px', 
            fontFamily: 'proxima-nova' 
            }, 
            }, 
        states: { 
            hover: { 
            enabled: false 
          }
        } 
      }

    ],

/** COMMENT 2 - START **/
    plotOptions: {
      series: {                  
        stacking: 'normal',
        dataLabels: { 
            enabled: false 
        },
        events: {
          legendItemClick: function (e) {
            e.preventDefault();
          }
        }
      }
    }
/** COMMENT 2 - END **/

});

mychart.addSeries({ type: 'line', name: 'Indicator1', lineWidth: 0,  
data: [3.3, 2, 3, 6, 3], pointPlacement: 0.3, showInLegend: true, 
dataLabels: { enabled: true, allowOverlap: true, verticalAlign: 'top', align: 'right', color: '#ff0000', style: { textOutline: false } }, 
marker: { symbol: 'circle', fillColor: '#ff0000' }, 
states: { hover: { enabled: false }, }
});


mychart.addSeries({ type: 'line', name: 'Indicator2', data: [3.3, 2, 3, 6, 3], pointPlacement: -0.3, showInLegend: true, dataLabels: { enabled: true, allowOverlap: true, verticalAlign: 'bottom', align: 'right',  style: { textOutline: false }, x: 0, y: 0 }, lineWidth: 0, marker: { symbol: 'diamond', fillColor: '#000000' }, states: { hover: { enabled: false }, }
});

Answer 1

В настоящее время у вас есть оба индикатора в одной группе стеков, что делает значения во втором индикаторе суммироваться с первым.Если вы хотите, чтобы они выглядели как вторые изображения в вашем вопросе, вы должны разделить их группы, используя опцию stack: value в их серии.что-то вроде этого: (примечание stack: 0 в индикатор1 и stack: 1 в индикатор2 )

mychart.addSeries({ type: 'line', name: 'Indicator1', lineWidth: 0,  
data: [3.3, 2, 3, 6, 3], stack : 0, pointPlacement: 0.3, showInLegend: true, 
dataLabels: { enabled: true, allowOverlap: true, verticalAlign: 'top', align: 'right', color: '#ff0000', style: { textOutline: false } }, 
marker: { symbol: 'circle', fillColor: '#ff0000' }, 
states: { hover: { enabled: false }, }
});


mychart.addSeries({ type: 'line', name: 'Indicator2', data: [3.3, 2, 3, 6, 
3],stack:1, pointPlacement: -0.3, showInLegend: true, dataLabels: { enabled: true, 
allowOverlap: true, verticalAlign: 'bottom', align: 'right',  style: { textOutline: 
false }, x: 0, y: 0 }, lineWidth: 0, marker: { symbol: 'diamond', fillColor: 
'#000000' }, states: { hover: { enabled: false }, }

JSFiddle: https://jsfiddle.net/3pfm8Laz/

Справочник по API: https://api.highcharts.com/highcharts/series.line.stack