Search code examples
javascripthighchartsgauge

Gauge chart, how to decrease width of serie?

I trying to create a gauge chart with Highcharts. I need to decrease the width of my serie but unfortunately I don't found how to make that with highcharts.

This is my desired output :

enter image description here

And I make this gauge :

Highcharts.chart('container', {

  chart: {
    type: 'solidgauge',
    height: '65%',
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false,
  },

  title: {
    text: '',
    style: {
      fontSize: '24px'
    }
  },

  tooltip: {
    borderWidth: 0,
    color: 'black',
    backgroundColor: 'none',
    shadow: false,
    style: {
      fontSize: '13px'
    },
    align: 'center',
    useHTML: true,
    pointFormat: '<div style="font-size:2em; font-weight: bold;">{point.y}%</div><br><div style="text-align: center;">{series.name}</div>',
    positioner: function(labelWidth) {
      return {
        x: (this.chart.chartWidth - labelWidth) / 2,
        y: (this.chart.plotHeight / 2) - 22
      };
    }
  },

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{ 
      outerRadius: '87%',
      innerRadius: '63%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
        .setOpacity(0.3)
        .get(),
      borderWidth: 0
    }]
  },

  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    tickPositions: []
  },

  plotOptions: {
    solidgauge: {
      dataLabels: {
        enabled: false
      },
      rounded: true
    }
  },

  series: [{
    name: 'Label',
    data: [{
      color: 'orange',
      radius: '87%',
      innerRadius: '63%',
      y: 64
    }]
  }]
});

(function(H) {
  H.wrap(H.Tooltip.prototype, 'hide', () => {});
}(Highcharts));

var obj = document.getElementById('container')
var chart = Highcharts.charts[obj.getAttribute('data-highcharts-chart')];
var tooltipPoint = chart.series[0].points[0];
chart.tooltip.refresh(tooltipPoint);
#container {
  margin: 0 auto;
  max-width: 400px;
  min-width: 380px;
}

.highcharts-credits {
  display: none;
}
<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>

<div id="container"></div>

But as you can see, the width of my serie is to big. There is a way to decrease this width ?

Solution

  • You can achieve it by increasing pane.background.innerRadius and series.data.innerRadius.

    Code:

      pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{
      outerRadius: '87%',
      innerRadius: '80%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
        .setOpacity(0.3)
        .get(),
      borderWidth: 0
    }]
  }

  ...

  series: [{
    name: 'Label',
    data: [{
      color: 'orange',
      radius: '87%',
      innerRadius: '80%',
      y: 64
    }]
  }]

    Demo:

    API reference: