Highcharts Demo

author(s): Torstein Hønsi

by Sascha

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart("container", {
  chart: {
    type: "column",
    polar: false,
    renderTo: "",
    style: { fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif" }
  },
  plotOptions: {
    series: {
      stacking: "normal",
      dataLabels: { enabled: true, style: { fontWeight: "bold" } },
      fillOpacity: 0.4,
      label: { style: { fontWeight: "normal" } }
    }
  },
  yAxis: [
    {
      stackLabels: { enabled: true },
      title: { text: null },
      visible: true
    },
    {
      max: 10312,
      title: { text: "test" },
      visible: true,
      opposite: true
    }
  ],
  credits: { enabled: false },
  exporting: { enabled: false },
  title: { text: null, align: "left", style: { fontSize: "16px" } },
  boost: { useGPUTranslations: false },
  tooltip: {
    useHTML: true,
    headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>'
  },
  legend: { enabled: true },
  series: [
    { type: "column", data: [0, 0, 0, 2545] },
    {
      type: "column",
      data: [8614, 0, 0],
      name: "Actual",
      color: "rgb(88, 138, 229)"
    },
    {
      type: "column",
      data: [0, 11000, 0],
      name: "Plan",
      color: "rgb(144, 164, 174)"
    },
    {
      type: "column",
      data: [0, 0, 1000],
      name: "setup Duration",
      color: "yellow"
    },
    {
      type: "column",
      data: [0, 0, 1000],
      name: "idle Duration",
      color: "rgb(63, 81, 181)"
    },
    {
      type: "column",
      data: [0, 0, 1000],
      name: "downtime Duration",
      color: "rgb(244, 67, 54)"
    },
    {
      type: "column",
      data: [0, 0, 2000],
      name: "run Duration",
      color: "green"
    }
  ],
  xAxis: {
    tickmarkPlacement: "on",
    labels: { autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90] },
    title: { text: null },
    visible: true,
    categories: ["Actual", "Plan", "Duration"]
  },
  colors: [
    "#ff6c00",
    "#a66999",
    "#0040ff",
    "#5cb85c",
    "#c5c5c5",
   ...