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/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
</figure>

JavaScript

Highcharts.chart("container", {
  chart: {
    type: "column",
		width: 600
  },
  legend: {
    layout: "vertical",
    symbolHeight: 15,
    symbolWidth: 10,
    symbolRadius: 0
  },
  tooltip: {
    pointFormat: "",
    fontWeight: "bold",
    useHTML: true,
    shadow: false,
    lineWidth: 400,
    borderRadius: 0,
    padding: 8
  },
  yAxis: {
    title: false,
    gridLineWidth: 0,
    labels: {
      enabled: false
    },
    plotLines: [{
      value: 0,
      zIndex: 4
    }]
  },
  xAxis: {
    visible: false
  },
  credits: {
    enabled: false
  },
  series: [{
      dataLabels: {
        enabled: true,
				verticalAlign: 'bottom',
				align: 'left',
				inside: true,
				rotation: -90,
				x: -20,
				y: -10
      },
      name: "John",
      data: [{
        dataLabels: {
          format: 'Apples'
        },
        y: 5
      }, {
        dataLabels: {
          format: 'Oranges'
        },
        y: 3
      }, {
        dataLabels: {
          format: 'Pears'
        },
        y: 4
      }, {
        dataLabels: {
          format: 'Grapes'
        },
        y: 7
      }, {
        dataLabels: {
          format: 'Bananas'
        },
        y: 2
      }]
    },
    {
      name: "Jane",
      data: [2, -2, -3, 2, 1]
    },
    {
      name: "Joe",
      data: [3, 4, 4, -2, 5]
    }
  ]
});