Area Chart

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

When to Use?

An area chart shows information by using colored areas to show amounts over a certain time period. Usually, they are very similar to line graphs in that they show how one or more groups evolve over time. Area charts are beneficial when:

• They show changes in size because the dark areas below the lines clearly show the differences in values, making it easy to compare.
• When working with more than one set of data, area charts helps in comparing several variables at once, giving a better understanding of their connections and trends.
• Area charts highlight data variations, patterns, and cyclic trends throughout time.
• Produces a visually appealing representation with a small number of data points without the need for a large amount of data.

For further insights into area charts, explore more.

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 area 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 area 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.
• To add more datasets to the chart, click ‘+’ on the right of the dataset table. Once a new dataset is added, fill in the values, and the chart will reflect the new column. Click on ‘-’ to remove any additional dataset columns.
• Click ‘+’ below the dataset table to add more values to the X-axis. 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.
• Area charts can be switched to a simple column chart, bar chart, combo chart, or line chart from this menu.

Customize Chart

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 (and its text theme) here. Toggle off if not needed.

 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 switching 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.

Assign Dataset

• If the chart contains multiple datasets, use this to assign datasets to a secondary axis.

Primary Axis:

• Add or remove the axis label by turning the ‘Title’ toggle on or off.
• Edit the axis range by changing the Min/Max values in ‘Range’ and setting the step size.

Secondary Axis:

• This is active only if a dataset is assigned to this axis.
• Add or remove the axis label by turning the ‘Title’ toggle on or off.
• Edit the axis range by changing the Min/Max values in ‘Range’ and setting the step size.

Gridlines

• Add/remove horizontal gridlines to the chart by toggling on/off.

4. Properties

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

Stroke Width

• Use the slider to adjust the width/thickness of the bars in the chart.

Line Style:

• Use the line style option to choose one of the following styles (solid, dotted, dashed) for your chart.

Markers:

• Switch on or off to add or remove markers from the lines in the chart.
• Change the style of the markers from circle to square, triangle, diamond, etc., from the ‘Style’ drop-down below the toggle.
• Adjust the marker size as well by using the ‘Size’ slider.

Area Opacity

• Adjust the opacity of the shaded area in the chart by using this slider. This will apply to all the datasets in the chart.

Data Labels

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

Legends

• Add/remove legends to the chart by toggling on/off.
• Change the position of where they appear by selecting one of the options in the ‘Position’ drop-down.

5. Reference Lines

Add benchmark lines to the chart to show how each point on the area compares to a key value in your data, such as the average or a target percentile. Expand ‘Reference lines’ in the Customize tab and toggle on the line types you need. You can show more than one reference line at the same time.

• Line Types

  • Mean: Draws a line at the average value of the selected dataset.
  • Median: Draws a line at the middle value of the selected dataset.
  • Min line: Draws a line at the lowest value of the selected dataset.
  • Max line: Draws a line at the highest value of the selected dataset.
  • Percentile: Draws a line at a chosen percentile. Use the ‘Percentile value’ slider to set it anywhere from the 5th to the 95th percentile (90th by default).

• Line Setting

Once a line type is toggled on, its settings open below it. Each line type has its own settings, so you can style every line separately.

• • Data: Choose which dataset the line is calculated from.
  • Line style: Pick Solid, Dashed, or Dotted. Reference lines are Dashed by default, so they stand apart from the chart’s area outlines.
  • Color: Pick a color from the swatch or enter a hex code. Each line type starts with a different default color, so lines are easy to tell apart.
  • Data label: Toggle on to show the line’s name and value on the chart (for example, ‘Mean: 34.17’). Use the two dropdowns to place the label at the Top or Bottom, and on the Left or Right of the line.
  • Shaded Area: Toggle on to shade one side of the line. In ‘Position’, choose ‘After’ (the default) to shade from the start of the axis up to the line, or ‘Before’ to shade from the line to the end of the axis. Set the fill in ‘Shaded Area Color’.

Tip: Area charts already fill the space under each line. If you turn on a reference line’s Shaded Area, lower the ‘Area Opacity’ in Properties or pick a contrasting ‘Shaded Area Color’ so the two fills stay easy to tell apart.

Note: Reference lines are available for selected variations of the Area chart. If you don't see the ‘Reference lines’ section in the menu, the current variation may not support it.

6. 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’.
• Adjust their alignment to either left, center, or right of the element using ‘Alignment’.
• 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 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.

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

6. Variation

• By clicking this, the 'Choose Style' pop-up will appear. From here, choose a different design for the element. 
• Also, the pop-up can be opened by double-clicking any chosen element.
• By changing it using the methods outlined above, other element modifications can be achieved.

7. Theme & Customizations

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 area chart on its own, without changing the rest of the dashboard.

• Element Color Theme

Pre-fills this chart's title, shaded areas, lines, markers, and data labels from the project's Primary, Secondary, and Tertiary palette (a Contrast palette is also available for combo charts). Then lets you edit any swatch or hex code to override the colors for this chart alone. There's no theme gallery at this level; changes apply immediately, and 'Reset to Default' brings it back in line with the project theme. See Mokkup Themes for more.

• Element Text Theme

Style the chart's Title, X-Axis and Y-Axis (Title and Labels), Data Labels, Legend, and, when toggled on, the Buttons, Dropdowns, and KPI (Title, Measured Value, Compared Value, Percentage Change, Others) add-ons, each with its own Font, Size, Style (Bold/Italic/Underline), Alignment, and Color, plus 'Reset to Default'. See Text Themes for the full list.

• Element Effects Theme

Rounded Corners, Padding (set independently for the inner spacing's Left/Top/Right/Bottom sides, plus an overall outer padding), Element Color, Drop Shadow, and Stroke. See Effects Theme for details.

• Not available on this element:

• The Buttons add-on doesn't have a background-color option yet (Dropdowns and KPI 'added value' fields do).

• A KPI's Percentage Change indicator keeps its green/red color tied to whether the change is positive or negative, so it can't be manually recolored.

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 true too.

This is a complete guide to using and editing an Area chart on Mokkup. For further questions, please ask our chatbot or contact support.