Highcharts Demo

author(s): Torstein Hønsi

by Sascha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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"></div>

CSS

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

JavaScript

Highcharts.chart("container", {
  chart: {
    type: "column",
    inverted: true,
    polar: false,
    renderTo: "",
    margin: 0,
    style: { fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif" }
  },
  plotOptions: {
    series: {
      stacking: "normal",
      dataLabels: { enabled: true, style: { fontWeight: "bold" } },
      fillOpacity: 0.4,
      label: { style: { fontWeight: "normal" } },
      pointWidth: 'Infinity'
    }
  },
  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: false },
  series: [
    {
      data: [{ y: 1, color: "rgba(211, 211, 211, 1)" }],
      name: "notPicked",
      color: "rgba(0, 128, 0, 1)"
      
    },
    {
      data: [{ y: 3, color: "rgba(211, 211, 211, 1)" }],
      name: "on way",
      color: "rgba(0, 128, 0, 1)"
    },
    {
      data: [{ y: 5, color: "rgba(211, 211, 211, 1)" }],
      name: "in buffer",
      color: "rgba(0, 128, 0, 1)"
    },
    {
      data: [{ y: 258, color: "rgba(255, 0, 0, 1)" }],
      name: "despatched",
      color: "rgba(0, 128, 0, 1)"
    }
  ],
  xAxis: {
    tickmarkPlacement: "on",
    labels: { autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90] },
    visible: false
  },
  yAxis: { title: { text: null }, labels: { enabled: false } },
  colors: [
    "#ff6c00",
    "#a66999",
    "#0040ff",
    "#5cb85c",
    "#c5c5c5",
    "#ff5494",
    "#FF9655",
    "#FFF263",
    "#6AF9C4"
  ]
});