HighCharts - Pie Semi Circle (Arrow in Chart)

Question

I've been trying to insert arrow in semi circle donut chart (like speedometer has)

tried everything but no result for me

this is it on image what I want to do

I have created jsfiddle.net/ymf2zzn1/ to demonstrate my issue

$(function () {
    $('#container').highcharts({
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: 'Browser<br>shares<br>2015',
            align: 'center',
            verticalAlign: 'top',
            y: 40
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
  yAxis: [{
         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
            },
         plotBands: [{
          from: 0,
          to: 46,
          color: 'pink',
          innerRadius: '100%',
          outerRadius: '0%'
         },{
          from: 46,
          to: 90,
          color: 'tan',
          innerRadius: '100%',
          outerRadius: '0%'
         }],
         pane: 0,
         
     }],
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true,
                    distance: -50,
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        textShadow: '0px 1px 2px black'
                    }
                },
                startAngle: -90,
                endAngle: 90,
                center: ['50%', '75%']
            },
            gauge: {
       dataLabels: {
        enabled: false
       },
       dial: {
        radius: '100%'
       }
      }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            innerSize: '50%',
            data: [
                ['Firefox',   25],
                ['IE',       25],
                ['Chrome', 25],
                ['Opera',     25]
            ]
        }],
    });    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

score 5 · Accepted Answer · answered Nov 13 '15 at 11:55

You could use two series - one for pie and another for angular gauge.

JSFiddle: http://jsfiddle.net/ymf2zzn1/1/

$(function () {
    $('#container').highcharts({
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },
        title: {
            text: 'Browser<br>shares<br>2015',
            align: 'center',
            verticalAlign: 'top',
            y: 40
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        pane: {
            center: ['50%', '75%'],
            size: '50%',
            startAngle: -90,
            endAngle: 90,
            background: {
                borderWidth: 0,
                backgroundColor: 'none',
                innerRadius: '60%',
                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
            },
            /*plotBands: [{
                from: 0,
                to: 46,
                color: 'pink',
                innerRadius: '100%',
                outerRadius: '0%'
            },{
                from: 46,
                to: 90,
                color: 'tan',
                innerRadius: '100%',
                outerRadius: '0%'
            }],*/
            pane: 0,

        }],
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true,
                    distance: -50,
                    style: {
                        fontWeight: 'bold',
                        color: 'white',
                        textShadow: '0px 1px 2px black'
                    }
                },
                startAngle: -90,
                endAngle: 90,
                center: ['50%', '75%']
            },
            gauge: {
                dataLabels: {
                    enabled: false
                },
                dial: {
                    radius: '100%'
                }
            }
        },

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

Hello, I just did according to you but getting some lines behind the arrow how can I remove these lines and also unable to change the colors when i paste the same code in jsfiddle its work but not in my website — Mr. Tomar, Feb 20 '18 at 07:02
https://stackoverflow.com/questions/48879679/highchart-semi-pie-chart-with-arrow-issue please check for detail issue — Mr. Tomar, Feb 20 '18 at 07:13

HighCharts - Pie Semi Circle (Arrow in Chart)

1 Answers1