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 (
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.
Plot your data horizontally or vertically and compare your set of data.
Connect your data points and emphasize your changes over a period of time.
Plot one or more groups of values over multiple common variables along each axis in a form of a polygon.
Use this chart to compare your data as part of a whole.
Adding and Editing 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.
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.
To start, navigate to the ‘Styling’ tab.
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
Customizing the axes and legend
By navigating to the tab for 'Axes' and 'Legend' respectively, you will be able to set and customize options.
Depending on the selection (either X or Y) the selected axis will be displayed on the horizontal (X) axis.
Enable “Add Axis” to display the axis on your chart.
Determines the origin of the chart and is dependent on your “Main Axis” selection. Only applicable for Bar and Line Chart.
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.
By reversing the axis the chart will start from right to left or top to bottom. It is dependent on your “Main Axis” selection.
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.
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°).
Similarly, in the tab for Legend, you will be able to add or hide a legend and customize it to fit your needs.
Define the position of your legend.
Set the alignment of your legend.
Adjust the width of your legend box.
Adjust the height of your legend box.
Customize your legend text color.
Customize your legend text by adjusting the font size.
Customize your legend text by adjusting the font-weight.
Customize your legend text by selecting the font family.
From this tab, you will be able to add a load animation and scroll animation depending on your design needs.
Add View Animation
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
Scroll Length (px)
Start animation after your entered pixel
Animate your chart by each column