semi circle donut chart highchart with text embedded inside - html

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/

Answer 2

This looks like a z-index issue. But well, I have got a better solution. Not sure if it helps:
.wrap {position: relative; z-index: 1; width: 150px; height: 150px;}
.wrap span {top: 0; right: 0; width: 50%; line-height: 95px; background-color: #fff; z-index: 5; position: absolute; text-align: center; font-size: 2em; height: 50%; overflow: hidden;}
.wrap .outer-circle,
.wrap .inner-circle {position: absolute; border-radius: 100%; background-color: #00f; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; margin: 25px;}
.wrap .inner-circle {background-color: #fff; z-index: 3;}
<div class="wrap">
<span>75%</span>
<div class="outer-circle">
<div class="inner-circle"></div>
</div>
</div>
Preview: