Docs
Premium components
Doughnut ring
Premium feature

This is a premium feature which requires a paid plan to be used. See here for more details.

Doughnut ring

The DoughnutRing component allows you to visualise data on a radial axis. This can be useful for data which needs to reach a target value that you want to show how far it is from reaching it's target, or also for showing the upper and lower range of a certain dataset.

Example JSON

Below are two examples of the JSON required to define a DoughnutRing.

{
    "type": "DoughnutRing",
    "options": {
        "width": "1/3",
        "data": [{"end": 55}, {"end": 78}],
        "chart_title": "Chart title",
        "inside_title": "Usage",
        "inside_subtitle": "(hours)",
        "caption": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae provident ipsa culpa officiis illum commodi voluptas, sequi repellat veniam adipisci laboriosam amet nesciunt nam explicabo voluptate minima inventore, minus sint"
    }
},
{
    "type": "DoughnutRing",
    "options": {
        "width": "1/3",
        "data": [
            {
                "start": 5,
                "end": 55,
                "label": "Label 1",
                "colour": "#06B6D4"
            },
            {
                "start": 35,
                "end": 78,
                "label": "Label 2",
                "colour": "#F97316"
            }
        ],
        "chart_title": "Chart title",
        "inside_title": "Usage",
        "inside_subtitle": "(hours)"
    }
}

Options
KeyDescription
dataThe data to plot in the chart, which should be an array of objects with at least the key end.

Data

The data key must be an array of objects, with each object containing as a minimum the key end which corresponds to the end point of the ring drawn on the chart. You can also provide the below optional keys:

KeyDescription
endThe end value for the ring.
startOptional. The start value for the ring. Defaults to 0.
labelOptional. The label for the data point to be plotted. If provided, used to build a legend under the chart.
colourOptional. The colour used to plot the ring on the chart.

Colours

The below colours are used to plot the rings, cycling through them if more than 5 rings are plotted.

Width

For details on the width key, please see here.

Plotting

The rings are plotted in descending order of the end key (which is the end point of the arc ring). This means the longest ring is plotted first, followed by the shorter one top of it, and so forth. This ensures the smaller rings are always visible.

Example

Missing something?

Hybiscus is continuously improving and adding new features. If you think we are missing a critical feature, please do not hesitate to contact us and offer your feedback at info@hybiscus.dev