JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<canvas id="canvas" width="100" height="100" ></canvas>
<canvas id="donutOTIF" width="100" height="100" ></canvas>

JavaScript

jQuery.fn.extend({
    DonutIt: function (options) {
        return this.each(function () {
            var defaults = {
                color: "#600",
                bgColor: "#000",
                percentage: 50,
                fontColor: "#000",
                fontSize: "14px",
                fontFamily: "Arial, Helvetica, sans-serif"
            };
            var settings = $.extend({}, defaults, options);
            var canvas = this;
            console.log(canvas);
            console.log(settings.percentage);
        });
    }
});
$("#canvas,#donutOTIF").DonutIt({
    percentage: 99.5
});
$("#donutOTIF").DonutIt({
    percentage: 50
});