Options passed via data attributes or JavaScript

[simivar]

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]

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.