100% native and cool looking animated JavaScript/CoffeeScript gauge. See more at Gauge.js homepage.
const gauge1 = document.getElementById("gauge1");
const opts = {
angle: 0, // The span of the gauge arc
lineWidth: 0.06, // The line thickness
radiusScale: 1, // Relative radius
pointer: {
length: 0.6, // // Relative to gauge radius
strokeWidth: 0.035, // The thickness
color: "#fff", // Fill color
},
fontSize: 20,
limitMax: false, // If false, max value increases automatically if value > maxValue
limitMin: false, // If true, the min value of the gauge will be fixed
colorStart: "#6F6EA0", // Colors
colorStop: "#C0C0DB", // just experiment with them
strokeColor: "#eee", // to see which ones work best for you
generateGradient: false,
scaleOverride: true,
highDpiSupport: true, // High resolution support
};
opts.colorStop = "#864DD9";
const gaugeObject1 = new Donut(gauge1).setOptions(opts); // create sexy gauge!
gaugeObject1.maxValue = 3000; // set max gauge value
gaugeObject1.setMinValue(0); // set min value
gaugeObject1.set(Math.floor(Math.random() * 3000)); // set actual value
gaugeObject1.setTextField(document.getElementById("gauge1Value"));
Generate SVG sparklines with JavaScript without any external dependency. See more at Sparkline homepage.
<svg class="sparkline sparkline--red" width="100" height="30" stroke-width="3"></svg>
<svg class="sparkline sparkline--red sparkline--filled" width="100" height="30" stroke-width="3"></svg>
<script>sparkline(document.querySelector(".sparkline"), [1, 5, 2, 4, 8, 3, 7]);</script>BTC Price
ETH Price