Advanced Donut Chart with multiple rings

ArborRose

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.

ArborRose

I should have noted that my legend shows in order of outer ring to inner ring. Labels on the rings are not turned on in the screenshot.