Easy Pie Chart : Bug percentage not centered?

Question

I have a symfony project, I use bootstrap for style, and I want to use Easy Pie Chart for a dashboard page.

So, in base.html.twig :

<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %} Website {% endblock %}</title>
   {% block stylesheets %}{% endblock %}
    {% block javascripts %} {% javascripts
        'js/jquery-1.10.2.min.js'
        'js/bootstrap.min.js' 
        'js/typeahead.min.js'
        'js/jquery.easypiechart.min.js'
        'js/jquery.sparkline.min.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %} 
    {% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('img/favicon.png') }}" />
</head>
<body>
    {% block header %}
    {% endblock %}

    <div class="container">
        {% block body %}
        {% endblock %}
    </div>
    {% block javascripts_after %}
    {% endblock %}
</body>
</html>

In my dashboard page I have :

{% block body %}
    <div class="row">
        <div class="jumbotron">
            <div id="easy-pie-chart" data-percent="55">
                55%
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts_after %}
<script>
    $('#easy-pie-chart').easyPieChart({
        animate: 2000,
        scaleColor: false,
        lineWidth: 12,
        lineCap: 'square',
        size: 100,
        trackColor: '#e5e5e5',
        barColor: '#3da0ea'
    });
</script>

{% endblock %}

But I have this :

enter image description here

The text is not centered, why ?

I try to add this in my css but it don't work either :

.easyPieChart {
  position: relative;
  text-align: center;
  canvas {
    position: absolute;
    top: 0;
    left: 0;
  }
}

If I check the code html generated I have :

<div class="row">
        <div class="jumbotron">
            <div data-percent="55" id="easy-pie-chart">
                55%
            <canvas height="100" width="100"></canvas></div>
        </div>
    </div>

It seems missing the style = "width: 100px; height: 100px; line-height: 100px;" in the div block, why is not added dynamically ?

ppollono · Accepted Answer · 2013-11-29 12:07:18Z

2

Check this fiddle

You forgot to add a class in the wrapper class="chart"

<div class="row">
    <div class="jumbotron">
        <div class="chart" data-percent="55" id="easy-pie-chart">
            <span class="percent">55</span>
        </div>
    </div>
</div>

edited Nov 29, 2013 at 12:07

answered Nov 28, 2013 at 22:10

ppollono

3,6721 gold badge23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2178964 Over a year ago

Mhhh, I don't really understand, if I add this class, and the CSS for them, it's not dynamic. If I change the size of the easy pie chart in js, the text is not centered anymore, and I need to update the css... In the documentation of easy pie chart they don't talk about that...

ppollono Over a year ago

I cant belive they dont have a way to update the css rules of the elements. You can make a workarround check this fiddle jsfiddle.net/Palapas/52VtD/764 I will update the answer

user2178964 Over a year ago

Yes, it seems weird... Your solution is good, but is there a way to get the option "size" in the list of parameter, to adapt the text position, without use a variable ?

ppollono Over a year ago

Do you have multiple instances of the pie chart in the same page? I can make a global function for update those css values

user2178964 · Accepted Answer · 2013-11-29 12:49:40Z

1

Thanks to ppollono, I add this in my js :

$('#easy-pie-chart').css({
   width : $('#easy-pie-chart > canvas').attr('width') + 'px',
   height : $('#easy-pie-chart > canvas').attr('height') + 'px'
});

$('#easy-pie-chart .percent').css({
  "line-height": $('#easy-pie-chart > canvas').attr('height') + 'px'
})

It works well, but I don't think if it's the better solution

answered Nov 29, 2013 at 12:49

user2178964

1646 gold badges19 silver badges45 bronze badges

Comments

OmarAldaja · Accepted Answer · 2013-12-17 20:28:54Z

I use this code and is Work

<span class="chart" data-percent="86">
<span class="percent"></span>
</span>

You can change "data-percent" value

Jquery :

$('.chart').easyPieChart({
easing: 'easeOutBounce',
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});

Css :

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

You can change size like this

.chart {
/* ... */
  width: 200px;
  height: 200px;
/* ... */
}
.percent {
/* ... */
  line-height: 200px;
/* ...*/
}

$(function() {
    $('.chart').easyPieChart({
        easing: 'easeOutBounce',
        size: 200, /* New Size */
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});

rism · Accepted Answer · 2014-05-19 22:48:59Z

To answer your question:

The text is not centered, why ?

In my experience it's because the line height of the percentage and the line height of canvas are different and the percentage needs extra padding/margin left. So both elements are in a dom box sitting at the same baseline i.e. aligned on bottom 0, left 0.

Vertical Center

The percentage text doesn't float vertically because it's line height is less than the line height of the chart. So it's suppressed/pushed down because it cant rise above the top of it's container.

So to allow the text to float up to the vertical center of the chart you need to set the line height of the percentage span to be the same as the line height of the chart. The text will then float up to the middle of it's line height which will be the middle of the chart.

Horizontal Center

Then there is the horizontal center. Since the text is aligned left 0, you need a right ward "bump" and for that I used some padding-left.

As to whether or not this is a "bug" i dunno. I think it expected that you will edit the CSS as necessary for your project rather than the plugin running this calculation for you... tho it would be a fairly simple thing to compute.

Collectives™ on Stack Overflow

Easy Pie Chart : Bug percentage not centered?

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related