IN THIS ARTICLE

    IN THIS ARTICLE

      Lollipop Chart

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

      When to Use?

      A lollipop chart is a variation of a bar or column chart in which each bar is replaced by a thin stem and a marker at its end. Because the heavy fill of a bar is stripped away, the eye lands on the marker, instead of on the mass of the bar, which keeps the chart light even when there are many categories to show.

      Here’s when a Lollipop Chart is beneficial:

      • When ranking matters more than the magnitude. The markers make it easy to read the order of items from highest to lowest at a glance.
      • When bars would look too heavy. When a dashboard already carries several filled charts, a lollipop chart adds a comparison without adding visual weight.
      • When values are close together. Markers sit at a precise point on the axis, which makes small differences between categories easier to spot than shaded bar tops.
      • When presenting a clean, minimal layout. Lollipop charts suit executive summaries and report covers where a spare, uncluttered look is preferred.

      How to Create?

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

      Creating a New Project

      • Click on 'Create New Project' from the home page
      • Set up the project by filling in the name and choosing the frame size
      • Click on the lollipop chart in the left menu to add it. The 'Choose style' pop-up will open
      • Select the style that suits your dashboard and click 'Apply style' to place it on the canvas
      • Resize it on the canvas and place it 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 that uses a lollipop chart and click 'Use Template'
      • Select the lollipop chart 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. The lollipop chart ships with a vertical variation and a horizontal variation.

      How to Customize?

      Mokkup provides customization options for every element. These customization options are accessible via the left-hand navigation menu. The edit options are broken into 2 sections — Data and Customize.

      Data

      Anything related to the data populated in the chart 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 a new category to the chart. Once the new row is added, fill in the label and the value, and the chart will reflect the new data.
      • Click on '−' to remove any additional dataset rows.

      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 is explained below.

      1. Details

      Edit the basic chart details here.

      • 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

      All settings related to the X-axis are present here.

      • 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

      All settings related to the Y-axis are present here.

      • Axis — Toggle off if the chart doesn't need a Y-axis.
      • Title — Add or remove the axis label by turning the 'Title' toggle on or off.
      • Range — Edit the axis range by changing the Min/Max values, and control the interval between axis ticks using 'Step Size'.
      • Gridlines — Add or remove horizontal gridlines from the chart by toggling on or off.

      4. Properties

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

      • Marker Style — Change the shape of the marker at the end of each stem. Choose from Circle, Square, Triangle, or Diamond in the drop-down.
      • Marker Width — Use the slider to increase or decrease the size of the markers.
      • Data Labels — Add or remove data labels from the chart by toggling on or off.
      • Legends — Add or remove legends 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. Variation

      • This button opens the 'Choose style' pop-up.
      • Choose an alternative design for the element (a vertical or a horizontal lollipop chart) and click on Apply.
      • 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.
      • Click on the 'Default' option to revert to the original variation of the element in case you've selected a different one and want to go back to the default.

      7. Theme & Customizations

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

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

      Similar articles