Gauge chart Highchart dial style issue

Question

I am facing a wierd issue in gauge chart dial.

I want dial like this

However, I am not getting exactly like this.

plotOptions: {
        gauge: {
            dial: {
                radius: '100%',
                backgroundColor: 'gray',
                baseWidth: 20,
                topWidth: 1,
                baseLength: '3%', // of radius
                rearLength: '10%'
            }
        }
    }

You can see my efforts JSFiddle

I want bottom of it in round shape and also I want that black dot to be removed.

Thanks in advance.

Answer 1

This is my solution:

 plotOptions: {
   gauge: {
     dial: {
       radius: '70%',
       backgroundColor: 'gray',
       baseWidth: 20,
       topWidth: 1,
       baseLength: '3%', // of radius
       rearLength: '0%'
     }, 
     pivot: {
       radius: 10,
       backgroundColor: 'gray'
     }
  }
}

The black dot will not be removed but enlarged and colored gray so that serves as the round back of the dial. I am afraid the exact tear-drop-shape of the dial in your image may be impossible to achieve with highcharts.

http://jsfiddle.net/doc_snyder/6r654hr9/3/

Answer 2

http://jsfiddle.net/6r654hr9/1/ i have editing in your jsfiddle file

Answer 3

http://jsfiddle.net/6r654hr9/4/ Check and try this link this will work fine for you