IN THIS ARTICLE

    IN THIS ARTICLE

      Donut Chart

      This comprehensive guide will cover everything about Donut Charts in Mokkup.

      When to Use?

      A donut chart is a variation of a pie chart, with the center of the pie removed. This makes it a good choice when someone want to focus on the relative sizes of the slices, but don't want the chart to be dominated by the largest slice.

      A Donut Chart is beneficial when:

      • To indicate proportions: Like pie charts, donut charts display relative proportions of parts of a whole.
      • Have a small number of categories: Donut charts work best with 5 or fewer categories. It can be hard to distinguish between categories with more than 5.
      • Categorical data: This also works best for categorical data, such as traffic light colors or pet types.
      • When data is simple: Complex data can make donut charts hard to interpret. For instance, a donut chart with 10 or more categories can make it hard to distinguish between smaller sections.
      • Need to stand out visually: Donut charts may create a big visual effect. However, they should not be utilized alone to transfer data.
      • When explaining a concept: Donut charts can help non-technical audiences understand concepts. They should not transmit sophisticated info.

      How to Create?

      Creating a New Project:

      • Click on ‘Create new’ from the home page
      • Setup the project by filling in the name and choosing the frame size
      • Drag & Drop the donut chart on to the canvas or click on it to add from the left menu
      • Resize it on the canvas and place in the desired location
      • Edit it from the customize element menu which opens on element selection

      Using a Mokkup Template

      • Choose a template from the template library and click ‘Use Template’
      • Select the donut chart  that needs modification
      • Resize it on the canvas and place in the desired location

      Tip: Mokkup elements have multiple variations that can be accessed by double-clicking on the element or clicking Variation in the customize element menu.

      How to Customize?

      Mokkup allows various customization options for all elements. These customization options are present in the menu on the left side. The edit options are broken into 2 sections - Data and Customize. 

      Data

      Anything related to the data populated in the chart or the chart type can be found here.

      1. Edit Data

      • Add, remove, or modify the pre-built dataset for the chart here
      • To add more rows to the chart, click ‘+’ at the bottom of the dataset table.
      • Once a new row is added, fill in the values, and the chart will reflect the new dataset. 
      • Click on ‘-’ to remove any additional dataset rows.

      2. Switch Chart

      It is an easy way to switch between different chart types. Donut charts can be switched to pie charts from this menu.

      Customize

      This is the default tab that opens when an element is selected. All element customizations can be done in this tab. Each sub-section will be explained below.

      1. Details

      Edit the basic chart details here

      Title
      • Change the title of the chart here. Toggle off if not needed.

      2. Properties

      Contains all the settings that play a role in the aesthetics of the chart.

      Inner Radius
      • Increase or decrease the radius of inner circle of the chart.
      Data Labels
      • Add/remove data labels to the chart by toggling on/off. 
      • Change the labels displayed  by choosing one from the ‘Label Contents’ drop down.
      Legends
      • Add/remove legends to the chart by toggling on/off. Change the position in which they appear by selecting one of the options in the ‘Position’ drop-down.

      3. Add Ons

      Contains additional elements that can be added to the chart.

      Buttons
      • Switch on or off to add or remove buttons from the chart. 
      • Add multiple buttons by clicking ‘Add Button’. 
      • Edit the button's content by clicking on the Title 1’ text in this menu. 
      • Delete any button by clicking the ‘trash’ icon near the name of the button. 
      Dropdowns
      • Toggle on or off to add or remove dropdowns in the char 
      • Add dropdowns by clicking the ‘+’ icon
      • Reorder them by clicking the ‘Settings’ icon
      • Delete them by clicking the ‘Trash’ icon
      • The title can be edited in the ‘Edit Text’ field, and values can be added by entering values in the ‘Add Values’ field
      KPIs
      • Toggle on or off to add or remove KPIs from the chart. 
      • Add KPIs by clicking the ‘+’ icon
      • Reorder them by clicking the ‘Arrow’ icon
      • Delete them by clicking the ‘Trash’ icon. 
      • The title can be edited in the ‘Edit Text’ field, and values can be edited in the ‘Measured Value’ and ‘Percentage Change’ fields.

      Tip: Some add-ons cannot be used together in an element. For example: Turning on the Buttons toggle will automatically toggle off Dropdowns, and vice versa.

      4. Variation

      • Clicking this will open the ‘Choose Style’ pop-up. Pick a different style for the element from this. The pop-up can also be accessed by double-clicking any selected element.
      • Different element variations can also be achieved by customizing it using the steps described above.

      5. Theme & Customization

      Click the ‘Theme & Customization’ icon in the floating toolbar on top of the element (or open it by scrolling down the left side menu) to style this donut chart on its own, without changing the rest of the dashboard.

      Element Color Theme – Controls the donut chart's segment colors (Primary, Secondary, and Tertiary palettes), as well as the colors used by any Buttons, Dropdowns, or KPI add-ons you've added. Read this article to learn more about color themes.

      Element Text Theme – Style the text for every part of this element independently: Title, Data Labels, and the text in any active add-ons (Buttons, Dropdowns, KPIs, Text). Each item gets its own Font, Size, Style (Bold/Italic/Underline), Alignment, and Color, plus a ‘Reset to Default’ option. Read this article to learn more about text themes.

      Element Effects Theme – Controls Rounded Corners, Padding (set independently per side – Left/Top/Right/Bottom), Element Color, Drop Shadow, and Stroke for this element. Read this article to learn more about effects themes.

      Note: Whichever change you make most recently is the one that sticks. For example, if you customize an element's effects and then apply a new project-level Effects Theme, the project theme overrides that element's custom styling, and the reverse holds too.

      This was a complete guide to using and editing a donut chart on Mokkup. For further help, please ask our Chatbot or contact Support.

      Similar articles