Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container"></div>

CSS

#container {
    height: 640px;
    min-width: 300px;
    max-width: 800px;
    margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    borderWidth: 1,
    spacingBottom: 180
  },
  title: {
    text: 'Fruit Consumption',
    align: 'left',
  },
  xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges'],
  },
  yAxis: {
    title: {
      text: 'Fruit eaten',
    },
  },
  series: [{
    name: 'Jane',
    data: [1, 0, 4],
  }, {
    name: 'Marsupilami',
    data: [1, 0, 4],
  }, {
    name: 'Johnny',
    data: [5, 7, 3],
  }],
  legend: {
    enabled: true,
    layout: 'vertical'
  },
  caption: {
    text: '<b>The caption renders at the bottom of the chart, and is ' +
      'included if the chart is exported.</b><br><em>Lorem ipsum dolor ' +
      'sit amet, consectetur adipiscing elit, sed do eiusmod tempor ' +
      'incididunt ut labore et dolore magna aliqua. Ut enim ad minim ' +
      'veniam, quis nostrud exercitation ullamco laboris nisi ut ' +
      'aliquip ex ea commodo consequat. Duis aute irure dolor in ' +
      'reprehenderit in voluptate velit esse cillum dolore eu fugiat ' +
      'nulla pariatur. Excepteur sint occaecat cupidatat non proident, ' +
      'sunt in culpa qui officia deserunt mollit anim id est ' +
      'laborum.</em><br><em>Lorem ipsum dolor ' +
      'sit amet, consectetur adipiscing elit, sed do eiusmod tempor ' +
      'incididunt ut labore et dolore magna aliqua. Ut enim ad minim ' +
      'veniam, quis nostrud exercitation ullamco laboris nisi ut ' +
      'aliquip ex ea commodo consequat. Duis aute irure dolor in ' +
      'reprehenderit in voluptate velit esse cillum dolore eu fugiat ' +
      'nulla pariatur. Excepteur sint occaecat cupidatat non proident, ' +
      'sunt in culpa qui officia deserunt mollit anim id est ' +
      'laborum.</em>'
  },
  credits: {
    enabled: false,
  },
}, function(chart) {
  const x = chart.xAxis[0].left - chart.spacing[0];
  chart.update({
    caption: {
      x
    },
    legend: {
      x: x - chart.legend.group.alignAttr.translateX
    }
  });
});