semi circle donut chart highchart with text embedded inside

Question

I am using Highcharts js and I am trying to draw a pie chart with highCharts which is a semicircle and some text embedded inside it.

and Till now what I have made is

my html markup is

    <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-4">
            <div id="trends-pie-chart-1" class="trends-pie-chart">
                            <!-- draw pie chart here -->
            </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-4">
            <div id="trends-pie-chart-2" class="trends-pie-chart">
                <!-- draw pie chart here -->
            </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-4">
            <div id="trends-pie-chart-3" class="trends-pie-chart">
                    <!-- draw pie chart here -->
            </div>
        </div>
    </div>

css used

.trends-pie-chart {
width: 100%;
margin-bottom: 30px;
}

and Js used

 // Create the chart for Microsoft office
 var chart_completion = new Highcharts.Chart({
    chart: {
    renderTo: 'trends-pie-chart-1',
    type: 'pie',
    margin: [60,10,10,10]
},
colors: ['#fcfcfc', '#F4E998'] ,
tooltip: {
    enabled: false,
},
plotOptions: {
    pie: {
        slicedOffset: 0,
        size: '50%',
        dataLabels: {
            enabled: false
        }
    },
    series: noBorder
}, 
title: {
    text: 'Microsoft Office',
    align: 'center',
    verticalAlign: 'bottom',
    y : 10,
    style: {
        fontSize: '2em'
    }
},  
credits: {
    enabled: false
},
series: [{
    name: 'Browsers',
    data: [["",25],[,75]],
    innerSize: '60%',
    showInLegend:false,
    dataLabels: {
        enabled: false
    },
    states:{
        hover: {
            enabled: false
        }
    }
}]
},function (chart) { // on complete
chart.renderer.text('42 K Users', 140, 200)
.css({
    color: '#9BA0A2',
    fontSize: '2em',
  zIndex:100000
})
.add();

});
    // Create the chart for azure
    var chart_time = new Highcharts.Chart({
        chart: {
            renderTo: 'trends-pie-chart-2',
            type: 'pie',
            margin: [60,10,10,10]
        },
        colors: ['#fcfcfc', '#3EC1F9'] ,

        plotOptions: {
            pie: {
                slicedOffset: 0,
                size: '50%',
                dataLabels: {
                    enabled: false
                }
            },
            series : noBorder
        },
        tooltip: {
            enabled: false,
        },
        title: {
            text: 'Azure',
            align: 'center',
            verticalAlign: 'bottom',
            y : 10,
            style: {
                fontSize: '2em'
            }

        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Browsers',
            data: [["",25],[,75]],
            innerSize: '60%',
            showInLegend:false,
            dataLabels: {
                enabled: false
            },
            states:{
                hover: {
                    enabled: false
                }
            }
        }]
    });
    // Create the chart for Cloud Storage
    var chart_budget = new Highcharts.Chart({
        chart: {
            renderTo: 'trends-pie-chart-3',
            type: 'pie',
            margin: [60,10,10,10]
        },
        colors: ['#fcfcfc', '#6355FC'] ,
        plotOptions: {
            pie: {
                slicedOffset: 0,
                size: '50%',
                dataLabels: {
                    enabled: false
                }
            },
            series: noBorder
        },
        title: {
            text: 'Cloud Storage',
            align: 'center',
            verticalAlign: 'bottom',
            y : 10,
            style: {
                fontSize: '2em'
            } 
        },
        tooltip: {
            enabled: false,
            animation: false,
            backgroundColor: null
        },

        credits: {
            enabled: false
        },
        series: [{
            name: 'Browsers',
            data: [["",25],[,75]],
            innerSize: '60%',
            showInLegend:false,
            dataLabels: {
                enabled: false
            },
            states:{
                hover: {
                    enabled: false
                }
            }
        }]
    });
    /*pie charts trends page*/
   var noBorder = { 
    states:{
        hover:{
            halo: {
            size: 1
            }     
       }
      }
  };

Answer 1

You can change zIndex of your text by using .attr(): http://api.highcharts.com/highcharts#Element.attr

chart.renderer.text('42 K Users', 140, 200)
  .css({
    color: '#9BA0A2',
    fontSize: '2em',
  }).attr({
    zIndex: 5
  })
  .add();

It will work because your text is svg/vml object.

example: http://jsfiddle.net/dL6rebf5/22/