CODEWITHSUNDEEP
javascripthighcharts
Sunny Virk
Sunny Virk

Reputation: 1

Highcharts column chart extends off container and doesn't properly show X axis

I am attempting to show a columns chart that properly displays the x-axis when multiple series only have one piece of data each.

If there are several pieces of data, the chart displays correctly.

I've tried several options in the configuration, but Highcharts has a tough time displaying the x-axis labels with a limited amount of data.

I've created a JSFiddle: https://jsfiddle.net/d9tcvkpe/3/

Chart with little data that displays incorrectly:

Chart with little data that displays incorrectly

Chart with enough data to display correctly:

Chart with enough data to display correctly

Code:

  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,
      },
    },
  },

Upvotes: 0

Views: 268

Answers (1)

ewolden
ewolden

Reputation: 5803

I have two possible solutions for you, the first is to set startOnTick and endOnTick for the xAxis, like this:

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 Example: https://jsfiddle.net/ewolden/d9tcvkpe/4/

It will look like this: enter image description here

The second option is to adjust minPadding and maxPadding:

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

The numbers of padding can of course be adjusted depending on preference.

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 Example: https://jsfiddle.net/ewolden/d9tcvkpe/5/

It will look like this: enter image description here

Upvotes: 1

Related Questions