'easy-pie-chart zero percent renders as dot?

When I try to use easy-pie-chart with 0%, I'm still seeing a small dot being rendered at top/12 oclock position.

See screen shot. HTML/JS/CSS below.

Any idea what I'm doing wrong?

rendering of 0% HTML:

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

JS:

    $('.chart').easyPieChart({
    animate: 2000,
    scaleColor: false,
    lineWidth: 12,
    lineCap: 'square',
    size: 100,
    trackColor: '#e5e5e5',
    barColor: '#00FF00',
    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;
}
jquerycss


Solution 1:[1]

You can set barColor = trackColor: 

$(document).ready(function(){
      var charts = $('.percentage');
      charts.easyPieChart({
        animate: 1000,
        onStep: function(value) {
          this.$el.find('span').text(~~value);

          if(this.percentage == 0)
            this.options.barColor = this.options.trackColor;
        },

      });
});

DEMO

Solution 2:[2]

You're not doing anything wrong. I don't know if one of them is yours but there are several similar issues on plugin's GitHub page.

The plugin draws a line. In this case, it starts a line at 0, ends at 0 and applies a 3px thick stroke with rounded end-caps creating a little dot at the starting point.

In your code, you could just check if value is more than 0 and simply not display it at all, or chime in on GH and wait for a fix.

Solution 3:[3]

Try to set 'lineCap' to 'butt'. It helped me

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 talkhabi
Solution 2 Serg Chernata
Solution 3 Kliment Nechaev

Related Questions