Charts

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 empower you to effortlessly create annual reports and visualize data within your Vev projects. Whether you're showcasing sales figures, trends, or any other data, our built-in Charts make the process simple and efficient. Let's dive in!

Read our blog post about "Data Visualization Design 101: Tips, Best Practices and Examples" and "Using Animated Charts in Your Digital Content for Maximum Impact" to learn more about data visualization and get inspired by other projects made in Vev! 🤩

Also, visit our community to discover how to build an annual report in Vev.

Important note: Vev's chart component is designed for simple use cases with straightforward datasets with multiple columns and rows. We provide only four different chart types for basic data visualization. If your dataset is more complex and you require advanced visualization, we recommend using Flourish as a data visualization platform. With our Flourish component, you can embed your Flouirsh chart more seamlessly. If you already have another data platform in place, you can utilize our Embed Anything component to embed any charts into Vev.

Selecting a Chart

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

Chart type

Description

Bar / Column

Plot your data horizontally or vertically to compare your dataset. Navigate to the "Axes" tab and choose your "Main Axis." The X-axis represents the column, while the Y-axis represents the bar chart.

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 the form of a polygon.

Doughnut / Pie

Use this chart to compare your data as part of a whole.
Go to the "Styling" tab and set the "Cutout" to 0 for a Pie chart. By default, the "Cutout" is set to 50, representing the "Doughnut" chart.

Note: Depending on the chart type you select, the options in the "Styling" and "Axes" tab will vary accordingly. For example, if you choose "Doughnut/Pie Chart," you'll notice that the "Axes" tab will be removed.

Adding and Editing Data

Adding Data

By navigating to the "Data" tab, you can

  • Enter your data manually into the table or

  • choose the "Paste CSV content" option. Just copy your data (directly from an Excel or Google Sheet) into your clipboard before and paste it by using CMD+V.

Column A and Row 0 are reserved for labeling your data, indicated by the grey background color of the cells.

If you use "," as your separator within the cell, it will automatically be transformed to ".". Please ensure that your source data uses "." as the separator.

Important note: It's not possible to append extra units such as €, $, %, kg, etc., directly into the data cells. Instead, include the unit within your legend or add a separate textbox to specify your data unit.

Editing Data

From the "Data" tab, 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.

Tip: 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 styling your chart, navigate to the ‘Styling’ tab.

Depending on the chart type you've selected, you can style your columns and datasets with options such as:

Parameter

Description

Pattern

Adding a single pattern to a column will apply that style to all datasets within that column grouping. However, by adding multiple patterns, you can alternate patterns or even assign individual patterns to each dataset within that column. Pattern is available only for the Bar/Column Chart and Doughnut/Pie Chart. To add a pattern, simply click the "+" icon in the respective column.

Background Color

The default styling of the column dataset.

Hover Background Color

Styling of the column dataset when hovered over.

Add border

Add a border to the particular dataset.

Border color

Define the color of the border.

Border width

Adjust the thickness or width of the border.

Border radius

Set the radius of the border

Tip: If you have selected the "Line Chart", adjust the opacity of the background color of the fill to ensure that the entire line chart is visible to the user.

Chart background

By default, the chart background is filled with the #EEEEEE hex code. To adjust the background color, click on the chart, navigate to the right panel, and select "Background." Choose the background color you prefer.

Axes

In the "Axes" tab, you can customize and configure the axes settings for your chart.

Note: You can not set any axes for the "Radar chart"

Parameter

Description

Main Axis

Only relevant for "Bar/Column Chart": the X-axis represents the column, while the Y-axis represents the bar chart.

"X Axis", "Y Axis" tab

Select the respective tab to set your settings.

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 adjusting 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. It will pull the fonts of your current project.

Grid Label Position

Set the label positions on your chart.

Grid Label Padding

Adjust the padding of your grid label.

Grid Label Rotation Angle

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

Legend

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.

Tip: If you find that the legend is not meeting your needs and is limiting your styling options, consider adding a textbox to your canvas. You can customize the textbox to better suit your requirements and position it accordingly.

Animations

In this tab, you can add "View Animation" and "Scroll Animation" to enhance your design as needed. Simply toggle on or off to apply an animation to your chart.

Add View Animation

Parameter

Description

Time delay

Adjust the time delay in milliseconds, e.g. 300 = 300ms or 0.3 seconds

Horizontal percentage in view

If you're using a horizontal scroll section, this setting will determine when the animation begins based on how much of the section 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

By Dataset

Animate your chart by each column.

Scroll Length (px)

Start animation after your entered pixel

Pin when distance (px) is from the top

The pixel distance between the chart and the top border that pins the chart when the pixel is reached

Did this answer your question?