IN THIS ARTICLE

    IN THIS ARTICLE

      Nested Column Chart

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

      When to Use?

      A nested column chart is a data visualization that displays two related metrics within the same column, using an outer bar and an inner nested bar to show comparison side by side. It is ideal for:

      • When you need to compare two related values within the same category, such as target vs. actual, planned vs. achieved, or budget vs. spend.
      • When comparing performance across multiple categories while also showing the relationship between two measures in each.
      • When you want to visually highlight over- or under-performance at a glance across data points.
      • When presenting data where one metric is a subset or component of another, and the visual contrast matters.

      How to Create?

      There are two ways to use the nested column chart in Mokkup.

      Creating a New Project:

      1. Click on 'Create New Project' from the home page
      2. Set up the project by filling in the name and choosing the frame size
      3. Drag & Drop the nested column chart onto the canvas or click on it to add from the left menu
      4. Resize it on the canvas and place it in the desired location
      5. Edit it from the customize element menu, which opens on the element selection

      Using a Mokkup Template:

      1. Choose a template from the template library that uses a nested column chart and click 'Use Template'
      2. Select the nested column chart element that needs modification
      3. 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 the 'Variations' button in the left panel.

      How to Customize?

      Mokkup provides customization options for every element. These customization options are accessible from the left panel when the element is selected.

      Customize:

      This is the section that opens by default when an element is selected. In this tab, all element customizations can be made.

      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

      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.

      Column Width:

      • Adjust the width of the columns in the chart using the slider.

      Data Labels:

      • Add or remove data labels from the chart by toggling on or off.

      Legends:

      • Add or remove legends from the chart by switching them on or off.

      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 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 other fields.

      Text:

      • Toggle on or off to add or remove text boxes in the chart. Enter any information that needs to be included.
      • 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 turn off the dropdowns' toggle.

      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.

      Available styles:

      1. Basic-NestedColumn – A simple nested column chart with a title. Each category displays an outer bar and an inner nested bar, making it easy to compare two metrics across categories.
      2. Dropdown-NestedColumn – Includes a dropdown filter at the top of the chart. Use this style when the chart needs to support interactive data filtering within the wireframe.
      3. KPI-NestedColumn – Adds a KPI value with a trend indicator (e.g., 1234 | 12% ↑) alongside the chart header. Ideal for dashboards where showing a headline metric alongside the chart adds context.
      4. Button-NestedColumn – Includes toggle buttons (e.g., Title 1 | Title 2) at the top right to switch between data views. Best used when the audience needs to compare between two named datasets interactively.

      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 shadows, strokes, and more.
      • For more information, please refer to this article.

      This was an in-depth introduction to using and editing a Mokkup nested column chart element. For additional support, feel free to reach out.

      Similar articles