Generate a customised Embedded Economy diagram (Doughnut Economics)

Set colour interactively
Set colour manually
Set colour opacity

The size of the chart displayed on your computer can be modified by dragging its bottom-right corner. This enables you to select a size that suits your screen. If a scroll-bar appears on the right of the chart, drag the corner downwards until it disappears.

Click on the Embedded Economy chart over the element you wish to alter. Identifiers (CSS classes) of any elements under that point which can be modified will appear on buttons. As you move your mouse pointer over those buttons, the element(s) represented by each of them will be indicated on the chart by flashing magenta. Note that some elements can be represented by more than one button if they are part of a group - once for the element on its own and once for the group. When you see the element(s) you wish to modify flashing, click the button.

Once the element(s) you wish to modify are selected by clicking the button, use the controls on the right to change the colour and/or opacity. Click on the set colour interactively control to set the colour using a colour picker. The numeric code starting with a '#' is the 'hex' code for the colour, but that needn't concern you. However, if you know the hex code for the colour you want, you can also type it (or paste it) directly in here. If you know the 'HTML colour name' of the colour you want, you can also set the colour directly by typing (or pasting) its name into the set colour manually control and clicking the set button. Likewise if you know the 'rgb values' of the colour you want, you can set the colour by typing (or pasting) it into this control using the format 'rgb(<red>, <green>, <blue>)', e.g. 'rgb(165,42,42)'.

You can use the set colour opaciy slider to set the opacity (transparency) of the element. The lowest value you can set for opacity is 0.05 - which is virtually transparent. If you want a fully transparent element (I you want to hide it completely), use the set to transparent button instead. To remove all the styling you have applied, click the clear all button.

When your chart appears as you would like it, you can download it as either an SVG or PNG image using the download as SVG and download as PNG buttons. If you are able to use an SVG image for whatever you want to do, then it is the better choice because it scales without pixellation. But if you can't use an SVG then select the PNG option. PNG images do pixellate when displayed at large dimensions. To minimize pixellation, you can check the hide controls checkbox to maximise the size of the chart before using the download as PNG button.

This tool is designed to be used on a large screen with a mouse pointer device.