Search code examples
highchartsgauge

Highcharts gauge style

I would want realize a gauge with highcharts similar this pics, ayone can help me? In particular with this dials style.

enter image description here

I found a start example on this jsfidlle

jsfiddle.net/6r654hr9/4/

Solution

  • All you need to do to achieve the wanted result (starting from your jsfiddle demo) is set the pivot.radius to higher value and positioning the dataLabel properly.

    Demo: http://jsfiddle.net/BlackLabel/jp7znmce/

      dataLabels: {
    enabled: true,
    zIndex: 20,
    y: -17,
    style: {
      fontSize: '20px'
    },
    borderWidth: 0
  }

    API: https://api.highcharts.com/highcharts/series.gauge.pivot.radius

    API: https://api.highcharts.com/highcharts/series.gauge.dataLabels.style