19 April 2017
highcharts full width

Highcharts has paddings and spacings that will make the area charts line appear inside of the chart element. To get full width line you need to disable some spacings and lines. You have to disable axis tiles and move the labels on the chart instead of outside. This works on all line type charts, but in this example I am using the area chart.

Source code viewer
  1. var config = {
  2.   chart: {
  3.     type: 'area',
  4.     spacingLeft: 0,
  5.     spacingRight: 0,
  6.   },
  7.   xAxis: {
  8.     minPadding: 0,
  9.     maxPadding: 0,
  10.   },
  11.   yAxis: [    title: {
  12.       text: null
  13.     },
  14.     labels: {
  15.       align: 'left',
  16.       x: 3,
  17.       y: 16
  18.     },
  19.   },
  20.   // Opposite side axis settings.
  21.   {
  22.     opposite: true,
  23.     title: {
  24.       text: null
  25.     },
  26.     labels: {
  27.       align: 'right',
  28.       x: -3,
  29.       y: 16,
  30.     },
  31.   }],
  32. };
Programming Language: Javascript