search

rendro / easy-pie-chart

easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values
http://rendro.github.io/easy-pie-chart
MIT License
2.07k stars 501 forks source link

Options passed via data attributes or JavaScript #170

Open simivar opened 8 years ago

simivar commented 8 years ago

Options can be passed via data attributes or JavaScript. For data attributes, append the option name in lowercase to data-, as in data-barcolor="".

josezulu commented 4 years ago

I was able to achieve this by using a function for barColor option when initialising the chart, and adding "data-barColor" attribute to the chart element.

<div class="chart" id="my-chart" data-percent="-87" data-barcolor="#2BAB00">

$(".chart").easyPieChart({
   barColor: function() {
      return this.el.getAttribute("data-barColor") ? this.el.getAttribute("data-barColor") : "gray";
   }
 });

Note that I'm not using the percentage variable, which seems to prevent the chart from changing from default color to final color as it reaches the target value.

This way when I have many chart elements, it should render each chart with a different color according to the data-barColor value, or gray if the attribute is not set.