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