IN THIS ARTICLE

    IN THIS ARTICLE

      Pie Chart

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

      When to Use?

      A pie chart is a circular chart that is divided into slices, each of which represents a proportion of the whole. It is often used to visualize data that is categorical in nature, such as the percentage of people who prefer different brands of soda or the percentage of students who are enrolled in different majors.

      A Pie Chart is beneficial when:

      • Show proportions: For instance, a pie chart could illustrate the percentage of students in different majors.
      • Small number of categories: It can be hard to distinguish between categories with more than 5.
      • Categorical data: Pie charts work best for categorical data, such as traffic light colors or pet breeds.
      • When data is simple: Complex data can make pie charts hard to interpret. A pie chart with 10 or more categories can make identifying the distinctions between smaller sections hard.
      • Need a big visual impact: Pie charts can help. However, they should not be utilized alone to transfer data.
      • Trying to explain a concept: Pie charts are helpful for explaining concepts to non-technical audiences. 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 pie 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 pie chart that needs modification
      • Resize it on the canvas and place in the desired location
      • Edit it from the customize element menu which opens on element selection

      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
      • Click ‘+’ below the dataset table to add more values to the chart. Once a new row is added to the dataset, edit the values, and the chart will reflect the same. Click on ‘-’ to remove any additional dataset rows.

      2. Switch Chart

      It is an easy way to switch between different chart types. Pie charts can be switched to donut 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

      Choose to show or hide title of the chart here. Toggle off if you do not need to have a title for the double donut chart

      Edit Text:

      Change the title text from here. Click the 'Aa' icon next to the title field to open the element's Text Theme and style the title's font, size, style, alignment, and color.

      Text:

      Toggle on to add a line of supporting text below the title, and enter the content in the 'Text' field. Toggle off if not needed.

      2. Properties

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

      Text 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
      • Toggle on/off to show or hide the chart legend.
      • Choose where the legend appears from the ‘Position’ drop-down.

      3. Add Ons

      Contains additional elements that can be added to the chart.

      Buttons
      • Toggle on/off to add/remove buttons in the chart.
      • Add multiple buttons by clicking ‘Add Button’.
      • Edit the button's content by clicking on ‘Title 1’ text in this menu.
      • Delete any button by clicking the ‘trash’ icon near the name of the button.
      Dropdowns
      • Toggle on/off to add/remove dropdowns in the chart.
      • Add dropdowns by clicking the ‘+’ icon.
      • Reorder them by clicking the ‘Settings’ icon.
      • Delete them by clicking the ‘Trash’ icon.
      • Adjust their alignment to either left, center, or right of the element using ‘Alignment’.
      • 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. Themes & Customizations

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

      • Element Color Theme – Apply a different color theme (Primary, Secondary, or Tertiary, under the Main and Contrast tabs) to this pie chart only. This changes the colors of the pie slices and their matching legend markers. For more information, refer to Mokkup Themes.

      • Text Theme – Style each text item on the pie chart separately. Pick an item from ‘Item Name’: Title, Text Label, Legend, and Text, plus the Buttons, Dropdowns, and KPI add-ons (for KPIs, choose the specific ‘KPI Item’, such as its title). For each item, set the Font, Size, Style (Bold, Italic, Underline), Alignment, and Color, or click ‘Reset to Default’ to undo your changes. For more information, refer to Text Theme.

      • Effects Theme – Adjust Rounded Corners, Padding (inner and outer, set separately for the left, top, right, and bottom), Element Color (the chart’s background), Drop Shadow, and Stroke for this pie chart. For more information, refer to Effects Theme.

      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 pie chart on Mokkup. For further help, please ask our Chatbot or contact Support.

      Similar articles