CODEWITHSUNDEEP
javascripthighcharts
Raphael Sampaio
Raphael Sampaio

Reputation: 143

Missing columns in Highcharts when the series are added individually

I'm trying to add data to a chart, series by series. However, the columns are not centralized, and the initial and final columns are outside the charting area: https://jsfiddle.net/L28q3z7u/

Highcharts.chart('container', {
  chart: {
    type: "column",
  },
  xAxis: {
        type: "datetime",
        minTickInterval: 60000 * 60 * 24 * 365,
        crosshair: true
  },
  series: [{
    data: [1],
    color: "blue",
    pointStart: 1640995200000
  },
  {
    data: [2],
    color: "blue",
    pointStart: 1672531200000
  },
  {
    data: [3],
    color: "blue",
    pointStart: 1704067200000
  },
  {
    data: [4],
    color: "blue",
    pointStart: 1735689600000
  }]
});

If I try to add the data at once, it works: https://jsfiddle.net/263Lh4bu/

Highcharts.chart('container', {
  chart: {
    type: "column",
  },
  xAxis: {
        type: "datetime",
        minTickInterval: 60000 * 60 * 24 * 365,
        crosshair: true
  },
  series: [{
    data: [1,2,3,4],
        color: "blue",
    pointStart: 1640995200000
  }]
});

Does anyone know how I can do it by adding series by series?

Upvotes: 0

Views: 131

Answers (1)

magdalena
magdalena

Reputation: 3695

In that case, you need to disable column.grouping and set column.pointRange as the same value as xAxis.minTickInterval

  plotOptions: {
    column: {
      grouping: false,
      pointRange: 60000 * 60 * 24 * 365
    }
  },

Demo: https://jsfiddle.net/BlackLabel/pzb9jwnm/

API Reference: https://api.highcharts.com/highcharts/series.column.pointRange https://api.highcharts.com/highcharts/series.column.grouping

Upvotes: 1

Related Questions