Budget Allocation Donut
A budget slider that live-splits a donut chart, via ApexCharts.
Requires Bootstrap 5, ApexCharts. Add the CDN tags below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes them.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdn.jsdelivr.net/npm/apexcharts@3.49.1/dist/apexcharts.min.js"></script><div class="card border-0 shadow-sm" style="max-width:380px"><div class="card-body">
<h6 class="fw-bold mb-2">Budget calculator</h6>
<label class="form-label small fw-semibold d-flex justify-content-between">Monthly budget <span id="lfVal">$2,000</span></label>
<input type="range" class="form-range mb-2" id="lfRange" min="500" max="10000" step="500" value="2000">
<div id="lfChart"></div>
</div></div>var r=document.getElementById('lfRange'),val=document.getElementById('lfVal');
var chart=new ApexCharts(document.getElementById('lfChart'),{chart:{type:'donut',height:180},series:[40,35,25],labels:['Ads','Content','Tools'],colors:['#0d6efd','#16a34a','#ff477e'],legend:{position:'bottom'},dataLabels:{enabled:false}});
chart.render();
function fmt(n){return '$'+(+n).toLocaleString()}
r.addEventListener('input',function(){val.textContent=fmt(r.value);var b=+r.value;chart.updateSeries([Math.round(b*.4),Math.round(b*.35),Math.round(b*.25)])});Free to use.This component uses Bootstrap 5, ApexCharts (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.