Highcharts Demo

author(s): Torstein Hønsi

by Sascha

HTML

<script src="https://code.highcharts.com/stock/highstock.src.js"></script>
<script src="https://code.highcharts.com/highcharts-more.src.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/tilemap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>

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

JavaScript

const chart = Highcharts.chart("container", {
  colors: ["#FF6C00", "#A66999", "#0040FF", "#5CB85C", "#C5C5C5", "#FF5494"],
  chart: {
    backgroundColor: "transparent",
    spacing: 4,
    style: {
      fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
    },

    zoomType: "x",
    panning: true,
    panKey: "shift",
    type: "column",
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      pointPadding: 0,
      groupPadding: 0.05,
      label: {
        style: {
          fontWeight: "normal",
        },
      },
      dataLabels: {
        style: {
          fontWeight: "bold",
        },
      },
      marker: {
        enabled: false,
      },
      stacking: "normal",
    },
  },
  legend: {
    margin: 2,
    enabled: false,
  },
  tooltip: {
    style: {
      borderRadius: 4,
    },
    useHTML: true,
    shared: true,
    split: false,
    outside: true,
    headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
  },
  credits: {
    enabled: false,
  },
  exporting: {
    enabled: false,
  },
  title: {
    text: null,
    align: "left",
    style: {
      fontSize: "16px",
    },
  },
  boost: {
    useGPUTranslations: true,
    usePreallocated: true,
  },
  xAxis: {
    tickmarkPlacement: "on",
    labels: {
      autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90],
    },
    title: {
      text: null,
    },
    visible: true,
    categories: [
      "23",
      "00",
      "01",
      "02",
      "03",
      "04",
      "05",
      "06",
      "07",
      "08",
      "09",
      "10",
      "11",
      "12",
      "13",
      "14",
    ],
  },
  yAxis: [{
      title: {
        text: null,
      },
      visible: true,
      plotLines: [{
        value: 3744,
        zIndex: 4,
        width: 1,
        label: {
          text: " ",
        },
      }, ],
      reversedStacks: false,
    }
  ],
  series: [{
      type: "column",
      data: [{
          y: 3721,
          description: "3,721",
       ...