Highcharts Solid Gauge Width

2019-02-16 18:37发布

I've not found an API or previous question that addresses changing the width of the solid gauge data plot.

I can easily change the chart width, plot width, plot padding, arc background's inner and outer widths... but not the chart.

How do I prevent the chart (green) from overlapping the background (white)? (Just created account, so can't insert images yet)

https://www.dropbox.com/s/dtvekgi9uyxvpww/arc.png

pane: {
  center: ['50%', '70%'],
  size: '130%',
  startAngle: -90,
  endAngle: 90,
  background: {
    backgroundColor: '#fff',
    innerRadius: '75%',
    outerRadius: '100%',
    shape: 'arc',
    borderColor: 'transparent'
  }
},

Adjusting the '130%' doesn't solve the issue.

UPDATE::: http://jsfiddle.net/jm8E4/3/

Thanks

标签: highcharts
2条回答
唯我独甜
2楼-- · 2019-02-16 19:08

You can use innerRadius on yAxis.

plotOptions: {
        solidgauge: {
            innerRadius: '75%',
            dataLabels: {
                y: -45,
                borderWidth: 0,
                useHTML: true
            }
        }
 },

http://jsfiddle.net/jm8E4/6/

查看更多
爱情/是我丢掉的垃圾
3楼-- · 2019-02-16 19:13

Try below code

EDITED

i have changed innerradius and outerradius

       background: {
            backgroundColor: '#fff',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc',
            borderColor: 'transparent'
        }

create chart with innerRadius same as outerRadius

outerRadius is the background radius on which chart will shown and innerRadius is chart radius.

Demo Edited Fiddle

查看更多
登录 后发表回答