The donut charts in Domo appear to be quite limited. I created my own code to display a multi-ring donut chart, using a Domo blank brick. Generic screenshot below.
Each ring in my code has an actual amount, projected amount, and budget amount. The light gray represents the projected. The darker gray represents the budgeted. And the color represents the actual. My chart has an opacity setting to let the budget show through the ring if the actual has surpassed the budget. The markers also show the budget target if colors selected make the budget hard to see.
// Example values for multiple rings
const data = [
{ label: 'category1', actual: 95000, projected: 120000, budget: 100000, color: 'rgba(167, 220, 73, 0.8)' },
{ label: 'category2', actual: 15000, projected: 18000, budget: 20000, color: 'rgba(124, 187, 236, 0.8)' },
{ label: 'category3', actual: 85000, projected: 90000, budget: 80000, color: 'rgba(215, 88, 103, 0.8)' },
{ label: 'category4', actual: 6000, projected: 8000, budget: 10000, color: 'rgba(174, 132, 244, 0.8)' }
];
This code uses some sample data shown above. My own code links to dataset(0) in a brick.
In my code I can change the ring colors palette, background color, the thickness of the rings, and the gap space between rings.
const outerRadius = 250; // Outer radius of the outermost ring
const ringThickness = 40; // Thickness of each ring
const gapThickness = 15; // White gap space between rings
In a more mature code, there should be labels on the rings, not just in a legend.
My code page for this is 175 lines…including css, html, and javascript.
