Solid gauge

author(s): Torstein Hønsi

by Guillaume Seguin

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/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>

<figure class="highcharts-figure">
  <div id="container-speed" class="chart-container"></div>
</figure>

CSS

.highcharts-figure .chart-container {
	width: 400px;
	height: 350px;
	float: left;
}

.highcharts-figure, .highcharts-data-table table {
	width: 600px;
	margin: 0 auto;
}

@media (max-width: 600px) {
	.highcharts-figure, .highcharts-data-table table {
		width: 100%;
	}
	.highcharts-figure .chart-container {
		width: 300px;
		float: none;
		margin: 0 auto;
	}

}

JavaScript

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

    title: null,

    pane: {
    		size: '80%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor:
                Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    exporting: {
        enabled: false
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
/*         stops: [
            [0.0, '#a50026'],
            [0.1, '#d73027'],
            [0.2, '#f46d43'],
            [0.3, '#fdae61'],
            [0.4, '#fee08b'],
            [0.5, '#d9ef8b'],
            [0.6, '#a6d96a'],
            [0.7, '#66bd63'],
            [0.8, '#1a9850'],
            [0.9, '#006837'] 
        ], */
    },

    plotOptions: {
      gauge: {
        dataLabels: {
          format: '<div style="text-align: center">Estimation<br><span style="font-size: 16px;color: #006837">{y:,.0f} €</span></div>',
          useHTML: true,
          enabled: true
        },
        pivot: {
          radius: 0
        }
      }
    }
};

// The speed gauge
Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
    yAxis: [{
    	
        lineWidth: 0,
        minorTickInterval: null,
        tickWidth: 1,
        tickColor: '#606060',
        tickLength: 57,
        tickPosition: 'inside',
        title: {
          text: null,
          y: -80
        },
        labels: {
          enabled: true,
          useHTML: true
        },
        
        min: 0,
        max: 800000,
        tickPositions: [706000],
        showFirstLabel: false,
        showLastLabel: false,
        labels: {
          x: 5,
          /* x: -5, */
          y: -10,
          distance: 25,
          format: '<div style="text-align:center;"><strong class="size-h5"><span>Prix moyen <br/>du quartier</span><br>{value} €</strong></div>'
        },
   ...