Highcharts Demo

author(s): Torstein Hønsi

by hajime_nagahata

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>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

var categories = ["18-05","18-03"];
var series = [
  {
    name: 'A',
    type: 'column',
    stack: 'cost',
    data: [
      23230.47804782618,
      190010.87059032294
    ],
    pointWidth: 120,
    pointPadding: 0,
    pointPlacement: 0
  },
  {
    name: 'B',
    type: 'column',
    stack: 'cost',
    data: [
      2320.8903734681,
      16310.78326995882
    ],
    pointWidth: 120,
    pointPadding: 0,
    pointPlacement: 0
  },
  {
    name: 'C',
    type: 'column',
    stack: 'cost',
    data: [
      2000.5211038117725,
      11000.685282704626
    ],
    pointWidth: 120,
    pointPadding: 0,
    pointPlacement: 0
  },
  {
    name: 'D',
    type: 'column',
    stack: 'cost',
    data: [
      200.90458316618562,
      3500.91864556250843
    ],
    pointWidth: 120,
    pointPadding: 0,
    pointPlacement: 0
  },
  {
    name: 'A\'',
    type: 'column',
    stack: 'predict',
    data: [
      196990.88331358007
    ],
    pointWidth: 40,
    pointPadding: 0,
    pointPlacemen: 0
  },
  {
    name: 'B\'',
    type: 'column',
    stack: 'predict',
    data: [
      64150.50964721071
    ],
    pointWidth: 40,
    pointPadding: 0,
    pointPlacemen: 0
  },
  {
    name: 'C\'',
    type: 'column',
    stack: 'predict',
    data: [
      12000.13398145514
    ],
    pointWidth: 40,
    pointPadding: 0,
    pointPlacemen: 0
  },
  {
    name: 'D\'',
    type: 'column',
    stack: 'predict',
    data: [
      2000.07703060123538
    ],
    pointWidth: 40,
    pointPadding: 0,
    pointPlacemen: 0
  }
]

Highcharts.setOptions({
  colors: [
    '#8bc346', '#037cd9', '#d37ee5', '#eeeeee',
    '#c5e1a2', '#81bdec', '#e9bef2', '#f6f6f6',
    '#CC0000'
  ]
})

Highcharts.chart('container', {
  chart: {
    type: 'column',
    marginTop: 50
  },
  title: {
    text: null
  },
  xAxis: {
    categories: categories
  },
  yAxis: {
    min: 0,
    title: {
      text: null
    }
  },
  legend: {
    align: 'center',
    verticalAlign: 'bottom',
    x: 0,
    y: 0,
   ...