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.

This is what I want to draw

and Till now what I have made is

This is output I'm Getting

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
            }     
       }
      }
  };

Because the design you're trying to match isn't displaying actual data (all circles show the same value), do you need to use a charting library? I would recommend building the graphics in SVG. — Sean, Jan 15 '16 at 12:28

score 2 · Accepted Answer · answered Jan 18 '16 at 12:29

2

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/

answered Jan 18 '16 at 12:29

Grzegorz Blachliński

5,132
10
13

thank you for the fiddle. This is really very Helpful.@Grzgorz Blachlinski. – Mandar Kawtakwar Jan 18 '16 at 13:11

score 0 · Answer 2 · answered Jan 15 '16 at 12:30

0

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:

answered Jan 15 '16 at 12:30

Praveen Kumar Purushothaman

164,888
24
203
252

Thank You. but the Data is going to come thru a ajax call later and chart needs to be drawn dynamically. what my code snippet has right now is dummy data for all that is same – Mandar Kawtakwar Jan 15 '16 at 12:36
@MandarKawtakwar I saw your code snippet. I thought you are complicating things and gave you a simple solution. Anyway, lemme analyse yours and let's see if I can help. `:)` – Praveen Kumar Purushothaman Jan 15 '16 at 12:37
1

Praveen Kumar thank you for your answer and further try :) – Mandar Kawtakwar Jan 15 '16 at 13:28

semi circle donut chart highchart with text embedded inside

2 Answers2