Search code examples
javascriptcsschartseasypie

How to center the text in the middle of donut hole pie chart?


I want to create a donut hole pie chart to represent my data. I came across this site : http://rendro.github.io/easy-pie-chart/ . I follow their instruction all the way toward the end. I am close to get it working, but I don't know how to center the text in the middle of my pie chart.

Can someone help me with that ?

This is what I have so far.

    <div class="chart_1" data-percent="90" >
        <span>6</span>
    </div>

    <script type="text/javascript">
        $(function() {
            $('.chart_1').easyPieChart({

                             //Configuration goes here
                             easing: 'easeOutElastic',
                             delay: 3000,
                             barColor: '62ae41',
                             scaleColor: false,
                             lineWidth: 10,
                             trackWidth: 10,
                             animate: false,
                             lineCap: 'square',

                            });
        });
    </script>

Here is my result...

enter image description here


Solution

  • I was able to get it centered just with a slight modification:

    • added a "#" to the barColor
    • removed a trailing comma

      $(function() {
          $('.chart_1').easyPieChart({
              //Configuration goes here
              easing: 'easeOutElastic',
              delay: 3000,
              barColor: '#62ae41',
              scaleColor: false,
              lineWidth: 10,
              trackWidth: 10,
              animate: false,
              lineCap: 'square'
          });
      });
      

    http://jsfiddle.net/imamathwiz/gu3aL84e/