Doughnut ring

Premium component

This component requires a premimum subscription to be used. For more details, see Plans and pricing.

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.


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

    "type": "DoughnutRing",
    "options": {
        "width": "2/4",
        "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": {
        "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)"


Key Description
data The data to plot in the chart, which should be an array of objects with at least the key end.
margin Optional. The margin around the chart. Adjust if the axis labels are getting cut off. Defaults to 10.
chart_radius_percent Optional. What percent of the charting area the ring occupies. Defaults to 0.9 (90%).
arc_thickness_percent Optional. What percent of the chart width should the thickness of the arc rings be. Defaults to 0.33. (33%).
min_val Optional. Minimum value on the axis. Defaults to 0.
max_val Optional. Minimum value on the axis. Defaults to 100.
ticks_count Optional. Number of ticks on the axis. Defaults to 10.
background_ring_colour Optional. Background colour of the ring, over which the rings for data points are plotted over. Defaults to #F0F0F0.
font_size Optional. Font size in pixels for the text in chart. Defaults to 12.
chart_title Optional. The chart title.
inside_title Optional. Title placed inside the doughnut ring.
inside_subtitle Optional. Sub-title placed inside the doughnut ring, under the inside_title.
caption Optional. Caption below the chart.
width Optional. The width of the component, when inside a Section or Row component with their columns option set to null.


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:

Key Description
end The end value for the ring.
start Optional. The start value for the ring. Defaults to 0.
label Optional. The label for the data point to be plotted. If provided, used to build a legend under the chart.
colour Optional. The colour used to plot the ring on the chart.


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


The width key supports defining the width using a fraction specified as a string e.g. 1/3. The values for the denominator supported are 2, 3, 4, 5, 6 and 12, whilst the numerator can be any value up to the value of the denominator.

If the width key is set to null, then the component will attempt to fill all the available horizontal space.


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.


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