IN THIS ARTICLE

    IN THIS ARTICLE

      Bubble Chart

      This comprehensive guide will cover everything you need to know about the Bubble Chart element in Mokkup.

      When to Use?

      A bubble chart is a type of data visualization that displays three or four dimensions of data using bubbles (circles). Here are a few pointers on when to use a bubble chart element in a dashboard:

      • It is an extension of a scatter plot, where two variables define the position of a point on the X and Y axes, a third variable is represented by the size of the bubble, and a fourth variable can be shown using color.
      • When you need to highlight data clusters, patterns, or outliers across multiple dimensions.
      • When showing the proportion of data points relative to one another through bubble size can add clarity.
      • When you aim to visually explore relationships and trends in datasets involving multiple variables.

      How to Create?

      There are two ways to use the bubble chart in Mokkup.

      Creating a New Project:

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

      Using a Mokkup Template:

      • Choose a template from the template library that uses a bubble chart and click ‘Use Template’
      • Select the bubble chart element that needs modification
      • Resize it on the canvas or edit it from the customize element menu

      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 provides customization options for every element. These customization options are accessible via the left-hand navigation menu. 

      Customize: 

      This is the section that opens by default when an element is selected. In this tab, all element customizations can be made. Each sub-section is explained in detail below.

      1. Details

      Edit the basic chart details here.

      Generate Random Data:

      • Click to generate random data for the chart.

      Tip: There is no ability to change data manually or add a data source for this chart. Only randomly generated data is available.

      No. of Data Sets:

      • Change the number of data sets that are shown on the chart here.
      • A maximum of 15 datasets can be generated.

      Median Line:

      • Add or remove median line from the chart by toggling on or off.
      • It marks the midpoint of the data, splitting it into two equal halves, also known as the best fit line.

      Title:

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

      Alignment:

      • Adjust the title alignment to either the left, center, or right of the element.

      2. X-axis

      Axis:

      • Toggle off if the chart doesn’t need an X-axis.

      Title:

      • Add a label for the axis here. Toggle off if not needed.

      Gridlines:

      • Add or remove vertical gridlines from the chart by toggling on or off.

      3. Y-axis

      Axis:

      • Toggle off if the chart doesn’t need a Y-axis.

      Title:

      • Add a label for the axis here. Toggle off if not needed.

      Range:

      • Edit the axis range by changing the Min/Max values in ‘Range’ and setting the step size.

      Gridlines:

      • Add or remove horizontal gridlines from the chart by toggling on or off.

      4. Properties

      Contains all the settings that affect the chart's aesthetics. Use the dropdown to select which dataset to apply the properties to.

      Legends:

      • Add or remove legends from the chart by switching them on or off. 
      • Adjust the position of the legends by selecting an option from the ‘Position’ dropdown.
      • Change the title of the legend as well by using the ‘Edit Legend Text’.
      • Note that some variants, like the basic, buttons & median line bubble charts, do not have a legend option.

      Tip: For certain chart variants turning on the legends toggle may automatically disable KPIs from add ons, and vice versa. 

      Markers:

      • Change the style of the markers from circle to square, triangle, diamond, etc., from the ‘Marker Style’ drop-down.
      • Adjust the marker width as well by using the ‘Marker Width’ slider.

      Bubbles:

      • Use the slider to adjust the opacity of the bubbles in the chart.

      Data Labels:

      • Add or remove data labels from the chart by toggling on or off.
      • Change the position in which they appear by selecting one of the options in the ‘Position’ drop-down.

      5. 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’. 
      • Adjust their alignment to either the left, center, or right of the element using ‘Alignment’. 
      • 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 chart. 
      • Adjust their alignment to either the left, center, or right of the element using ‘Alignment’. 
      • 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. 
      • Adjust their alignment to either the left, center, or right of the element using ‘Alignment’. 
      • The title can be edited in the ‘Edit Text’ field, and values can be edited in the ‘Measured Value’ and ‘Percentage Change’ fields. 

      Text: 

      • Toggle on or off to add or remove text boxes in the chart. Enter any information that needs to be included for the chart by editing the ‘Text’ field. 
      • Adjust the alignment to either the left, center, or right of the element using ‘Alignment’. 
      • Change the font weight to normal, medium, or bold from ‘Font weight’. 

      Tip: Some add-ons cannot be used together in an element. For example, turning on the buttons toggle will automatically switch off dropdowns, and vice versa.

      6. Variations

      • This button opens the 'Choose Style' pop-up. 
      • Choose an alternative design for the element. 
      • Can also access the pop-up by double-clicking on any selected element.
      • Using the above-described customization methods, it is also possible to create various element variants.

      7. Design Customizations

      • This will access the 'Design Customizations' menu when clicked. 
      • Use this to change your active element theme and utilize customization options to add rounded corners, drop shadow, and stroke of the bubble chart element.
      • For more information, please refer to this article.

      This was an in-depth introduction to using and editing a Mokkup bubble chart element. For additional inquiries, please ask our Chatbot or contact support.

      Similar articles