premium componentsDoughnut ring

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.

Schema

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)"
    }
}

Description

KeyDescription
dataThe data to plot in the chart, which should be an array of objects with at least the key end.
marginOptional. The margin around the chart. Adjust if the axis labels are getting cut off. Defaults to 10.
chart_radius_percentOptional. What percent of the charting area the ring occupies. Defaults to 0.9 (90%).
arc_thickness_percentOptional. What percent of the chart width should the thickness of the arc rings be. Defaults to 0.33. (33%).
min_valOptional. Minimum value on the axis. Defaults to 0.
max_valOptional. Minimum value on the axis. Defaults to 100.
ticks_countOptional. Number of ticks on the axis. Defaults to 10.
background_ring_colourOptional. Background colour of the ring, over which the rings for data points are plotted over. Defaults to #F0F0F0.
font_sizeOptional. Font size in pixels for the text in chart. Defaults to 12.
chart_titleOptional. The chart title.
inside_titleOptional. Title placed inside the doughnut ring.
inside_subtitleOptional. Sub-title placed inside the doughnut ring, under the inside_title.
captionOptional. Caption below the chart.
widthOptional. The width of the component, when inside a Section or Row component with their columns option set to null.

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

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.

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