Value percentage into the circle

[mpgn]

Hi, I have a little problem when I use easy-pie-chart, the value of the circle go outside the circle.
Exemple :

<div class="chart" data-percent="73">73%</div>

<script  src="bower_components/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            $('.chart').easyPieChart({
                barColor: '#ffffff',
                trackColor: '#222222',
                scaleColor: false,
                size: 300,
                lineWidth: 10,
                lineCap: "square"

            });
        });
</script>

Any idea to move the value in the middle ?

[intermension]

I had the same problem. I had to manually fix it by setting a line height in css equal to the size of the chart, in your case 300 and then padding-left to what works in my case 13px. Not sure if this is a bug or just the way its done. Basically your chart span and the percentage span appear to occupying the same dom box but they are aligned at the baseline of that box. i.e. bottom left so the line height of your percentage value is suppressing the height of the percentage on screen. You'll likely need some script to correct padding when the value ticks from 99 to 100 a obviously this entails an extra character.

[rendro]

You can apply the styling from the demo folder:

Make sure to change with and height according to your canvas size.

.chart {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}
.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}
.percent {
  display: inline-block;
  line-height: 110px;
  z-index: 2;
}
.percent:after {
  content: '%';
  margin-left: 0.1em;
  font-size: .8em;
}

[gentunian]

This is closed as not being a bug or closed as can't make it dynamic? For every pie chart we need a different width/height?

[calvinKG]

HI,

I am having this problem with the angularJS directive please help

[pseabury]

Looking at the Angular version (angular.easypiechart.js), I don't see that the Angular version writes the actual percentage amount (i.e. "73%") on the canvas - is this correct? I see no parameters in the options object to enable this either. Is this capability only for the jQuery version?

[marcotas]

Hi @rendro it seems the angular version doesn't create the percentage label inside the canvas. Could you help us?
thanks

[vectrus]

@rendro Hi there, i have the same issue with the angular version. Are you planning on adding this in the near future?

Please advise, kind regards,
Julius

Never mind :

{{openorderspercentage}}%
Open:
{{openorders.length}}

    </div>

    <div easypiechart class="openorderwidget" options="optionshandled" percent="percenthandled">
    <div class="easypielabel">
        {{handledorderspercentage}}%<br/>
        <span>Afgehandeld</span><br/>
        {{handledorders.length}}

    </div>
    </div>
</div>

.openorderwidget {
width : 120px;
position : relative;
float : left;
}
.easypielabel {
width : 110px;
text-align: center;
position: relative;
z-index: auto;
top : 85px;
float : left;
display : block;
}

[chrispruitt]

Does anyone know if the angular version was ever updated to add the percentage to the middle?