Highchart Semi Circle With Gauge Chart. Shrink pie chart and move gauge up

0
votes

I have a jsfiddle with a semi circle and gauge chart. I shrunk the pie chart, and the gauge stayed in the middle of the pie chart. I want to move the arrow up to the bottom of the pie chart.

See the attached image for what I want.

enter image description here

See the fiddle for what I have: http://jsfiddle.net/mschreiberjdi/xumhy0zL/

enter code here
1
highcharts

1 Answers

1
votes

I don't remember exactly which changes I made but after fiddling around with it, I came up with what you're looking for.

http://jsfiddle.net/467pyero/

enter image description here

You'll need to play with the settings for the gray triangle to get it how you had it before but that should be pretty easy.

Basically what I did is moved everything down to the bottom of the canvas. The y-center inner dial is 95% to the bottom and its size is set at 80% which makes it fit perfectly inside the outer dial. To see it clearer, you can set its backgroundColor to 'silver' instead of null.

$(function() {
  $('#container').highcharts({
    chart: {
      renderTo: 'container',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false
    },
    title: {
      text: '40%<br>Probability Of <br>Success',
      align: 'center',
      verticalAlign: 'bottom',
      y: -70
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    pane: {
      center: ['50%', '95%'],
      size: '80%',
      startAngle: -90,
      endAngle: 90,
      background: {
        borderWidth: 0,
        backgroundColor: null,
        innerRadius: '90%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },
    yAxis: [{
      lineWidth: 0,
      min: 0,
      max: 90,
      minorTickLength: 0,
      tickLength: 0,
      tickWidth: 0,
      labels: {
        enabled: false
      },
      title: {
        text: '', //'<div class="gaugeFooter">46% Rate</div>',
        useHTML: true,
        y: 80
      },
      pane: 0,

    }],
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: true,
          distance: 0,
          style: {
            fontWeight: 'bold',
            color: 'white',
            textShadow: '0px 1px 2px black'
          }
        },
        startAngle: -90,
        endAngle: 90,
        center: ['50%', '100%']
      },
      gauge: {
        dataLabels: {
          enabled: false
        },
        pivot: {
          radius: 125,
          borderWidth: 2,
          borderColor: 'transparent',
          backgroundColor: 'white'
        },
        dial: {
          radius: '100%',
          backgroundColor: 'gray',
          borderColor: 'gray',
          baseWidth: 140,
          topWidth: 1,
          baseLength: '5%', // of radius
          rearLength: '5%'
        }
      }
    },

    series: [{
      type: 'pie',
      name: 'Browser share',
      innerSize: '85%',
      data: [
        ['', 25],
        ['', 25],
        ['', 25]
      ]
    }, {
      type: 'gauge',
      data: [40],
      dial: {
        rearLength: 0
      }
    }],
  });
});