Recently my html guy implemented piechart using jquery plug -in name as easyPieChart just like in the following way.

html code:

 <span class="chart pull-right" data-percent="45" id="_percentUpdate">
<div class="flip-container">
  <div class="flipper" onclick="this.classList.toggle('flipped')" id="conserHoursFlip">
   <div class="front percent"></div>
   <div class="back percent"></div>
  </div>
</div>                                              
<span>

I want to change dynamically bar color through JavaScript or backbone.js,but I can't able to fix this.

Right now it is in green color,I want to change to another color.

can anyone help me.

Thanks.

Recently my html guy implemented piechart using jquery plug -in name as easyPieChart just like in the following way.

html code:

 <span class="chart pull-right" data-percent="45" id="_percentUpdate">
<div class="flip-container">
  <div class="flipper" onclick="this.classList.toggle('flipped')" id="conserHoursFlip">
   <div class="front percent"></div>
   <div class="back percent"></div>
  </div>
</div>                                              
<span>

I want to change dynamically bar color through JavaScript or backbone.js,but I can't able to fix this.

Right now it is in green color,I want to change to another color.

can anyone help me.

Thanks.

• javascript
• jquery
• html

• By creating your own... – Afzaal Ahmad Zeeshan Commented Feb 18, 2014 at 18:26
• I know nothing about this plugin but have you tried to set style="bacground-color:red;" – Gumbo Commented Feb 18, 2014 at 18:27
• I don't want to set background color,I just want to set color to bar. – user3279058 Commented Feb 18, 2014 at 18:31

8 Answers 8

What took me some time to figure out is how to make it dynamically show desired color based on percentage. This is what I came up with in jQuery:

$('.piechart').easyPieChart({
    barColor: function (percent) {
       return (percent < 50 ? '#5cb85c' : percent < 85 ? '#f0ad4e' : '#cb3935');
    },
    size: 150,
    scaleLength: 7,
    trackWidth: 5,
    lineWidth: 5,

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

This is the example of how it would look like in case you have more than one Chart Pie:

I've been trying to figure this out myself and after some fooling around this seems to be working for me.

$('#your_chart').data('easyPieChart').options.barColor = '#0033CC';

for dynamic change of barColor use this:

in your HTML:

<span class="easyChart" data-percent="20" data-barcolor="ffdc00"></span>

in your js:

$('.easyChart').easyPieChart({
    barColor: function (percent) {
        barColor = '#767676'; // this is default barColor
        if($(this.el).data('barcolor')) {
            barColor = '#' + $(this.el).data('barcolor')
        }
        return barColor;
    },
    trackColor: '#c7c7c7',
});

You can change trackColor also

Read the documentation on the plugin homepage: http://rendro.github.io/easy-pie-chart/

When you initialize the plugin with jQuery, you can set custom parameters like barColor.

So instead of the default:

<script type="text/javascript">
$(function() {
    $('.chart').easyPieChart({
        //your configuration goes here
    });
});
</script>

You can do:

<script type="text/javascript">
$(function() {
    $('.chart').easyPieChart({
        barColor: '#000'
    });
});
</script>

It's really not that hard. Try reading the documentation.

Snippet :

barColor: function (percent) {
   return (percent < 50 ? 'rgba('+(92+Math.ceil(148/50*percent))+','+(184-Math.ceil(11/50*percent))+','+(92-Math.ceil(14/50*percent))+',1)' : 
   percent < 100 ? 'rgba('+(240-Math.ceil(37/50*(percent-50)))+','+(173-Math.ceil(116/50*(percent-50)))+','+(78-Math.ceil(25/50*(percent-50)))+',1)' : 
   'rgba(203,57,53,1)');
},

If you want to animate from red to green, you can use this :

    $('.chart').easyPieChart({
        barColor: function (percent) {
            return 'hsl(' + (Math.round(percent) * 1.2) + ', 100%, 35%)';
        },
        animate: {
            duration: 2000, 
            enabled: true,
        },
        onStep: function(from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent)); 
        }
    });

Actually you can do something like this to get dynamic colours to your pie chart. Assue your dynaVal range between 0 and 50. Preset some colors to get dynamic colors.

var dynaColorsSet = [
                     "#FFFFFF", // red
                     "#070AEB", // blue
                     "#1DEB07", // green
                     "#FAF211", // yellow
                     "#F76F30" // orange
                    ];

$('#chart').easyPieChart({
            barColor: function(dynaVal) { // dynaVal (can be int/float) is the dynamic value that keep changing
                    var clr = function(dynaColorsSet, dynaVal){
                        var defColor = dynaColorsSet[0];
                            if(dynaVal <= 20){
                                defColor = dynaColorsSet[1];
                            }else if(dynaVal <= 30){
                                defColor = dynaColorsSet[2];
                            }else if(dynaVal >= 30 && dynaVal < 40){
                                defColor = dynaColorsSet[3];
                            } else if(dynaVal >= 40){
                                defColor = dynaColorsSet[4];
                            }
                        }
                        return defColor;
                    };
                    return clr(dynaColorsSet, dynaVal); // this line returns the final
    });

Here is my EasyPieChart function to change the pie chart based on the percent. This will cause the color to get more Red as it nears completion.

    var chartColors =  function(percent) {
      var dynaColorsSet = ['#fcfcad', '#F8F933', '#FACC00', '#FB6600', '#FB9900', '#FB4800', '#CB0A0A', '#960808'];
      if (percent <= 5) {
        return dynaColorsSet[0];
      } else if (percent <= 15) {
        return dynaColorsSet[1];
      } else if (percent <= 30) {
        return dynaColorsSet[2];
      } else if (percent <= 45) {
        return dynaColorsSet[3];
      } else if (percent <= 60) {
        return dynaColorsSet[4];
      } else if (percent <= 75) {
        return dynaColorsSet[5];
      } else if (percent <= 85) {
        return dynaColorsSet[6];
      } else if (percent > 95) {
        return dynaColorsSet[7];
      }
    };

    $scope.options = {
      size: 50,
      animate:{
        duration:3000,
        enabled:true
      },
      barColor: chartColors,
      scaleColor: false,
      lineWidth: 5,
      lineCap: 'circle'
    };