Столбчатая диаграмма Highcharts выходит за пределы контейнера и неправильно отображает ось X

Question

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

Если данных несколько, диаграмма отображается правильно.

Я попробовал несколько вариантов в конфигурации, но Highcharts испытывает трудности с отображением меток оси X с ограниченным количеством данных.

Я создал JSFiddle: https://jsfiddle.net/d9tcvkpe/3/

Диаграмма с небольшими данными, которые отображаются некорректно:

Диаграмма с достаточным количеством данных для корректного отображения:

Код:

  chart: {
    renderTo: id,
    type: 'column',
    zoomType: 'x',
    backgroundColor: cssVar('fig-desktop-wash'),
    height: 300,
  },
  credits: {
    enabled: false,
  },
  plotOptions: {
    column: {
      stacking: 'normal',
    },
    series: {
      connectNulls: true,
      lineWidth: 4,
      marker: {
        enabled: false,
        symbol: 'circle',
      },
    },
  },
  series: series,
  xAxis: {
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    type: 'datetime',
    tickInterval: 24 * 3600 * 1000 * 30,
    labels: {
      align: 'center',
      format: "{value:%b '%y}",
      enabled: true,
      y: 20,
    },
  },
  yAxis: {
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    tickmarkPlacement: 'on',
    stackLabels: {
      enabled: true,
      backgroundColor: cssVar('fig-desktop-wash'),
      style: {
        color: cssVar('fig-primary-text'),
        fontFamily: cssVar('x-default-font'),
        textShadow: 0,
      },
    },
  },

Answer 1

У меня есть два возможных решения, во-первых, установить startOnTick и endOnTick для xAxis, например:

xAxis: {
  startOnTick: true,
  endOnTick: true,
  ...
}

const seriesData = [
	{
  	data: [[1512086400000, 36.95]],
    maxPointWidth: 100,
    name: 'Alex',
    _colorIndex: 0
  },
  {
  	data: [[1509494400000, 12.99]],
    maxPointWidth: 100,
    name: 'Susan',
    _colorIndex: 1
  }
]

Highcharts.setOptions({
    global: {
      timezoneOffset: new Date().getTimezoneOffset() * 60,
      useUTC: false,
    },
});


Highcharts.chart('container', {
	      chart: {
        type: 'column',
        zoomType: 'x',
        height: 300,
      },
      credits: {
        enabled: false,
      },
      plotOptions: {
        column: {
          stacking: 'normal',
        },
        series: {
          connectNulls: true,
          lineWidth: 4,
          marker: {
            enabled: false,
            symbol: 'circle',
          },
        },
      },
      series: seriesData,
      xAxis: {
      startOnTick: true,
      endOnTick: true,
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        type: 'datetime',
        tickInterval: 24 * 3600 * 1000 * 30,
        labels: {
          align: 'center',
          format: "{value:%b '%y}",
          enabled: true,
          y: 20,
        },
      },
      yAxis: {
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        tickmarkPlacement: 'on',
        stackLabels: {
          enabled: true,
          style: {
            textShadow: 0,
          },
        },
      },
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JSfiddle Пример: https://jsfiddle.net/ewolden/d9tcvkpe/4/

Это будет выглядеть так:

---

Второй вариант - отрегулировать minPadding и maxPadding:

xAxis: {
  minPadding: 0.2,
  maxPadding: 0.2,
  ...
}

Количество подстановок, конечно, можно регулировать в зависимости отпредпочтение.

const seriesData = [
	{
  	data: [[1512086400000, 36.95]],
    maxPointWidth: 100,
    name: 'Alex',
    _colorIndex: 0
  },
  {
  	data: [[1509494400000, 12.99]],
    maxPointWidth: 100,
    name: 'Susan',
    _colorIndex: 1
  }
]

Highcharts.setOptions({
    global: {
      timezoneOffset: new Date().getTimezoneOffset() * 60,
      useUTC: false,
    },
});


Highcharts.chart('container', {
	      chart: {
        type: 'column',
        zoomType: 'x',
        height: 300,
      },
      credits: {
        enabled: false,
      },
      plotOptions: {
        column: {
          stacking: 'normal',
        },
        series: {
          connectNulls: true,
          lineWidth: 4,
          marker: {
            enabled: false,
            symbol: 'circle',
          },
        },
      },
      series: seriesData,
      xAxis: {
      minPadding: 0.2,
      maxPadding: 0.2,
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        type: 'datetime',
        tickInterval: 24 * 3600 * 1000 * 30,
        labels: {
          align: 'center',
          format: "{value:%b '%y}",
          enabled: true,
          y: 20,
        },
      },
      yAxis: {
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        tickmarkPlacement: 'on',
        stackLabels: {
          enabled: true,
          style: {
            textShadow: 0,
          },
        },
      },
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JSfiddle Пример: https://jsfiddle.net/ewolden/d9tcvkpe/5/

Это будет выглядеть так: