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
From the top menu, click on the Add Menu (
Shortcut: M)Search for and select 'Charts'
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;
Navigate to the tab Data
Copy your data (directly from an Excel or Google Sheet)
Paste it into the Paste CSV content field
Your data will display within the parameter menu where you can edit the data.
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 |