Using the Charts element

Add, customize, and style charts directly on your canvas. Display data and build out infographic content

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Charts help you tell a visual story using data. We’ve made it easy to paste your data from a CSV document (or directly from Excel or Google Sheets), then customize the styling and interaction for specific datasets.

Adding a Chart

  1. From the top menu, click on the Add Menu (Shortcut: M)

  2. Search for and select 'Charts'

  3. Click and drag the element onto your canvas

Selecting a Chart

After adding a chart to your canvas, you can access different charts by double-clicking on the element and opening up the custom parameters.

Chart type

Description

Bar

Plot your data horizontally or vertically and compare your set of data.

Line

Connect your data points and emphasize your changes over a period of time.

Radar

Plot one or more groups of values over multiple common variables along each axis in a form of a polygon.

Doughnut

Use this chart to compare your data as part of a whole.

Adding and Editing Data

Adding Data

To add your data to the chart;

  1. Navigate to the tab Data

  2. Copy your data (directly from an Excel or Google Sheet)

  3. Paste it into the Paste CSV content field

Your data will be displayed within the parameter menu where you can edit the data.

Note: Within your data tab, it's not possible to append extra units such as €, $, %, kg, etc. Instead, kindly include the unit within your legend or add a separate textbox to specify your data unit.

Editing Data

From the visual interface, you will be able to edit data just like you would in the original document. You can:

  • Insert more columns to the left and right of the current dataset

  • Delete column entirely

If you ever accidentally add or delete data, you can use the shortcut CMD+Z to bring the data back.

Note: If your data is not showing within the table after using the undo function, simply close the parameter menu, reload the canvas and your data will reappear.

Styling charts

To start, navigate to the ‘Styling’ tab.

Adding patterns

You can add multiple patterns to each column depending on your design needs.

Adding a single pattern to a column will assign that style to all datasets within that particular column grouping. However, by adding multiple patterns you will be able to alternate patterns or even assign individual patterns to each dataset within that particular column.

From here, depending on what chart you’ve selected, you will also be able to style your columns and datasets with options like:

  • Background color - The default styling of the particular column dataset

  • Hover background-color - The styling of the same column dataset when a user hovers over it

  • Add border - Add a border to the particular dataset

  • Border color - Add color to the border

  • Border width - Adjust the thickness or width of the border

  • Border radius - Adjust the radius of the border

Note: The list above is a full list of customizable options for all charts. Depending on what chart you’ve selected, only some of these options will be usable.

Customizing the axes and legend

By navigating to the tab for 'Axes' and 'Legend' respectively, you will be able to set and customize options.

Axes

Parameter

Description

Main Axis

Depending on the selection (either X or Y) the selected axis will be displayed on the horizontal (X) axis.

Add Axis

Enable “Add Axis” to display the axis on your chart.

Minimum Value

Determines the origin of the chart and is dependent on your “Main Axis” selection. Only applicable for Bar and Line Chart.

Maximum Value

Determines the maximum value of the chart to display your chart accordingly. It is dependent on your “Main Axis” selection. Only applicable for Bar and Line Chart.

Reverse Axis

By reversing the axis the chart will start from right to left or top to bottom. It is dependent on your “Main Axis” selection.

Stacked Axis

Your set of data will be stacked on the same (bar/column). Only applicable for Bar and Line Chart.

Add Axis Grid

Add gridlines to your chart for better readability.

Axis Grid - Grid Color

Customize your grid lines by changing the grid color.

Axis Grid - Grid Line Width

Customize your grid lines by adjustings the grid width.


Add Axis Grid Ticks

Customize your chart by adding grid ticks.

Add Grid Labels

Enable “Add Grid Labels” to display on labels on your chart.

Grid Label Font Size

Customize your chart by adjusting the font size of your labels.

Grid Label Font Weight

Customize your chart by adjusting the font-weight of your labels.

Font Family

Customize your chart by adjusting the font family of your labels.

Grid Label Position

Customize your chart by determining your label positions on your chart.

Grid Label Rotation Angle

Adjust your label rotation angle (max. 90°).

Legend

Similarly, in the tab for Legend, you will be able to add or hide a legend and customize it to fit your needs.

Parameter

Description

Position

Define the position of your legend.

Alignment

Set the alignment of your legend.

Box Width

Adjust the width of your legend box.

Box Height

Adjust the height of your legend box.

Text Color

Customize your legend text color.

Font Size

Customize your legend text by adjusting the font size.

Font Weight

Customize your legend text by adjusting the font weight.

Font Family

Customize your legend text by selecting the font family.

Animations

From this tab, you will be able to add a load animation and scroll animation depending on your design needs.

Add View Animation

Parameter

Description

Time delay

Adjust the time delay in milliseconds ex. 300 = 300ms or 0.3 seconds

Horizontal percentage in view

If using a horizontal scroll section this will set when the animation begins depending on how much of the sections scrolls into view

Vertical percentage in view

Similarly, this will be set when the animation begins depending on how far a user scrolls in that specific section

Add Scroll Animation

Parameter

Description

Scroll Length (px)

Start animation after your entered pixel

By Dataset

Animate your chart by each column

Did this answer your question?