Solid gauge

author(s): Torstein Hønsi

by Black Label

HTML

<meta charset="utf-8" />
<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/solid-gauge.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<table class="shorttable">
  <tr>
    <td>
      <figure class="highcharts-figure">
        <div id="container-outside" class="chart-container-temperature"></div>
      </figure>
    </td>
  </tr>
</table>

<script type="text/javascript">

    var gaugeOptions = {
      chart: {
        type: 'solidgauge'
      },

      title: null,

      pane: {
        center: ['50%%', '60%%'],
        size: '100%%',
        startAngle: -120,
        endAngle: 120,
        background: {
          backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
          innerRadius: '60%%',
          outerRadius: '100%%',
          shape: 'arc'
        }
      },
      credits: {
        enabled: false
      },

      exporting: {
        enabled: false
      },

      tooltip: {
        enabled: false
      },

      // the value axis
      yAxis: {
        stops: [
          [0.0, 'rgb(0,0,255)'], // blue -10-14
          [0.55, 'rgb(255,255,0)'], // yellow 14-20
          [0.65, 'rgb(0,255,0)'], // green 20-26           
          [0.78, 'rgb(255,0,0)'] // red 26-33
        ],
        lineWidth: 0,
        tickWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
          y: -25
        },
        labels: {
          enabled: false,
          y: 20,
          x: -20
        }
      },

      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: -20,
            borderWidth: 0,
            useHTML: true
          }
        }
      }
    };
    // The speed...

CSS

.highcharts-figure,
.highcharts-figure .chart-container {
    width: 120px;
    height: 100px;
    float: left;
padding: 0;
margin: 0;
}


.highcharts-data-table table {
    width: 600px;
    margin: 0 auto;
}
shorttable {
  width: 100px;
    height: 100px;

padding: 0;
margin: 0;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

@media (max-width: 600px) {
    .highcharts-figure,
    .highcharts-data-table table {
        width: 100%;
    }

}