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: {
    renderTo:
      "OPM_COMPERFORMANCE_TILE;_8cbe502a-b173-47f4-83b0-7fb9af9e2019perfchart",
    type: "column",
    polar: false,
    backgroundColor: "#424242",
    style: {
      fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif"
    },
    plotBorderColor: "#606063"
  },
  credits: {
    enabled: false,
    style: {
      color: "#666"
    }
  },
  exporting: {
    enabled: false
  },
  title: {
    text: null,
    align: "left",
    style: {
      fontSize: "20px",
      color: "#E0E0E3",
      textTransform: "uppercase"
    }
  },
  boost: {
    useGPUTranslations: false
  },
  plotOptions: {
    series: {
      fillOpacity: 0.4,
      pointPadding: 0,
      groupPadding: 0.05,
      label: {
        style: {
          fontWeight: "normal"
        }
      },
      dataLabels: {
        enabled: true,
        style: {
          fontWeight: "bold"
        },
        color: "#B0B0B3"
      },
      stacking: "normal",
      marker: {
        lineColor: "#333"
      }
    },
    boxplot: {
      fillColor: "#505053"
    },
    candlestick: {
      lineColor: "white"
    },
    errorbar: {
      color: "white"
    }
  },
  tooltip: {
    useHTML: true,
    headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>',
    backgroundColor: "rgba(0, 0, 0, 0.85)",
    style: {
      color: "#F0F0F0"
    }
  },
  legend: {
    enabled: false,
    itemStyle: {
      color: "#E0E0E3"
    },
    itemHoverStyle: {
      color: "#FFF"
    },
    itemHiddenStyle: {
      color: "#606063"
    }
  },
  xAxis: {
    tickmarkPlacement: "on",
    labels: {
      autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90],
      style: {
        color: "#E0E0E3"
      }
    },
    title: {
      text: null,
      style: {
        color: "#A0A0A3"
      }
    },
    visible: true,
    categories: [
      "06",
      "07",
      "08",
      "09",
      "10",
      "11",
      "12",
      "13",
      "14",
      "15",
     ...