Как уменьшить разрыв диаграммы HighStock между свечами?

Question

Я использую свечный график HighChart-HighStock. Я хочу сократить разрыв между подсвечниками. Это не так плохо, когда это в широком диапазоне увеличения. Но когда я много увеличивал график, отступы между свечами раздражали меня, потому что они слишком широко расставлены.

Я попытался установить pointPadding из plotOption&xAxis в 0, но ничего не произошло. Как я могу сократить этот разрыв?

Увеличенный график - слишком большой разрыв между свечами

Широкий обзор - не так уж и плохо

Highcharts.stockChart('container', {
  // title: { text: '---'},
  rangeSelector: {
    buttons: [
      // { type: 'hour', count: 1, text: '1h' },
      {
        type: 'day',
        count: 1,
        text: '1d'
      },
      // { type: 'all', count: 1, text: 'All' }
    ],
    selected: 1,
    //inputEnabled: true
  },
  xAxis: [{
    pointPadding: 0,
    type: 'datetime',

  }, {
    type: 'datetime',
  }],
  yAxis: [{
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: 'OHLC'
    },
    height: '70%',
    lineWidth: 2,
    resize: {
      enabled: true
    }
  }, {
    labels: {
      align: 'right',
      x: -3
    },
    title: {
      text: 'Volume'
    },
    top: '75%',
    height: '25%',
    offset: 0,
    lineWidth: 2
  }],

  plotOptions: {
    candlestick: {
      pointPadding: 0,
      downColor: 'blue',
      upColor: 'red',
      dataGrouping: {
        enabled: false,
      }
    },
    line: {
      lineWidth: 1,
      states: {
        hover: {
          enabled: false
        }
      }
    }
  },

  series: [{
      name: 'ohlc',
      type: 'candlestick',
      data: chartData,
    },
    {
      name: 'avg5',
      type: 'line',
      data: avg5Data,
      color: '#FF0000',
    },
    {
      name: 'avg10',
      type: 'line',
      data: avg10Data,
      color: '#0C9B3A',
    },
    {
      name: 'avg20',
      type: 'line',
      data: avg20Data,
      color: '#FF9900',
    },
    {
      name: 'avg60',
      type: 'line',
      data: avg60Data,
      color: '#000000',
    },
    {
      name: 'vol',
      type: 'column',
      data: moneyData,
      yAxis: 1,
      color: '#0944a3',
      dataGrouping: {
        enabled: false,
      }
    }
  ],
});
}

Answer 1

Вам необходимо установить series.pointPadding в сочетании с series.groupPadding (равным нулю) для достижения ожидаемого эффекта. Вот пример: https://jsfiddle.net/ahxrk5zq/

    series: [{
        type: 'candlestick',
        name: 'AAPL Stock Price',
        data: data,
        groupPadding: 0,
        pointPadding: 0.04,
        dataGrouping: {
            units: [
                [
                    'week', // unit name
                    [1] // allowed multiples
                ], [
                    'month',
                    [1, 2, 3, 4, 6]
                ]
            ]
        }
    }]

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

https://api.highcharts.com/highstock/series.candlestick.pointPadding

https://api.highcharts.com/highstock/series.candlestick.groupPadding