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/highcharts-more.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; max-width: 400px; height: 300px; margin: 0 auto"></div>

JavaScript

var options = {
  chart: {
    type: "gauge",
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false,
    renderTo: "",
    style: { fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif" }
  },
  pane: { startAngle: "-150", endAngle: "150" },
  yAxis: {
    title: { text: "Feeds/hr" },
    min: 1,
    max: 5000,
    minorTickInterval: 0,
    minorTickWidth: 1,
    minorTickLength: 20,
    minorTickPosition: "inside",
    minorTickColor: "#666",
    tickPixelInterval: 40,
    tickWidth: 2,
    tickPosition: "inside",
    tickLength: 20,
    tickColor: "#666",
    labels: {
      step: 5,
      rotation: "auto",
      distance: -40,
      style: { fontWeight: "bold", fontSize: "16px", color: "black" }
    },
    plotBands: [
      { from: 0, to: 2531, color: "#E1E639" },
      { from: 2531, to: 3037, color: "#E1E639" },
      { from: 3037, to: 3375, color: "#E1E639" },
      { from: 3375, to: 5000, color: "#E1E639" }
    ],
    visible: true
  },
  credits: { enabled: false },
  exporting: { enabled: false },
  title: { text: null, align: "left", style: { fontSize: "16px" } },
  boost: { useGPUTranslations: false },
  plotOptions: {
    series: {
      fillOpacity: 0.4,
      label: { style: { fontWeight: "normal" } },
      dataLabels: { style: { fontWeight: "bold" } }
    }
  },
  tooltip: {
    useHTML: true,
    headerFormat: '<span style="font-size: 10px">{point.key}</span><br/>'
  },
  legend: { enabled: false },
  series: [{ data: [1568] }],
  xAxis: {
    tickmarkPlacement: "on",
    labels: { autoRotation: [-10, -20, -30, -40, -50, -60, -70, -80, -90] },
    visible: false
  }
};
var chart = Highcharts.chart("container", options);

setTimeout(() => {
  options = {
    chart: {
      type: "gauge",
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false,
      renderTo: "",
      style: { fontFamily: "'Roboto', 'Helvetica', 'Arial',...