Charts feature in Vev allows you to add, customize, and style charts directly on your canvas. You can use it to visualize data such as sales figures, trends, or other metrics.

Charts in Vev let you:

Create visual representations of data (for example: a sales trend over 12 months, or a breakdown of user demographics).
Work with straightforward data sets (multiple rows and columns).
Choose from four predefined chart types (Bar/Column, Line, Radar, Doughnut/Pie).

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

Once you add a Chart component to your canvas and double-click it, you’ll open the parameters menu where you can select the chart type.

Here are the chart types and how to use them:

Bar / Column: Good for comparing data across categories (horizontal or vertical bars). Use the “Axes” tab to set the X-axis (category) and Y-axis (value).
Line: Best for showing trends over time (e.g., monthly revenue).
Radar: Useful for plotting multiple variables with a common center (e.g., skills assessment across different skill-areas).
Doughnut / Pie: Ideal for showing parts of a whole (e.g., market share). Note: To switch from a Doughnut to a Pie, go to the “Styling” tab and set “Cutout” to 0.

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 going to the Data tab of the Chart component.

You can either:
- Enter data manually into the table, or
- Paste CSV content from an external source (for example, copy from Excel or Google Sheets and paste using CMD+V). help.vev.design
Notes when pasting CSV:
- Column A and Row 0 are reserved for labels (cells with gray background). help.vev.design
- If you use a comma , as the decimal separator, it will convert automatically to a dot . — so best to use . directly. help.vev.design
- Do not include units (like €, $, %, kg) inside the data cells. Instead, add the unit in the legend or place a textbox in the canvas.

Editing Data

From the Data tab you can:
- Insert additional columns (to the left or right)
- Delete an entire column
If you accidentally make a change you want to undo, use CMD+Z (or Ctrl+Z) to revert. If data disappears after undoing, close the parameter menu, reload the canvas, and it should re-appear.

Styling charts

Go to the Styling tab to adjust how your chart looks. Depending on which chart type you selected (Bar/Column, Line, Radar, Doughnut/Pie), available styling options will vary.

Some of the styling options include:

Pattern: For Bar/Column or Doughnut/Pie charts, you can add patterns to dataset columns. A single pattern applies to all datasets in that column; multiple patterns allow alternating styles or distinct styles per dataset.
Background Color: Change the dataset’s base color.
Hover Background Color: Specify the color when a user hovers over a data segment.
Border: Adjust border color, width, or radius of dataset shapes.
Tip: For Line charts, reduce the background-fill opacity so the line remains visible.
Chart Background: By default the background is #EEEEEE. To change it: click the chart → right panel → “Background” → select your color.

Axes

In the Axes tab, you can configure axis settings.

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

Parameters include:

Main Axis: Only for Bar/Column charts. Defines which axis is the primary (X or Y).
X-Axis / Y-Axis Tabs: Set specific axis settings depending on your main axis choice.
Add Axis: Toggle this to display the axis on your chart.
Minimum / Maximum Value: Set the value range for charts (works for Bar/Column and Line charts).
Reverse Axis: Flip the axis direction (right to left or top to bottom).
Stacked Axis: Stack multiple datasets on the same bar/column (Bar/Column & Line charts only).
Add Axis Grid: Enable gridlines, then adjust grid color, width, ticks, labels, font size, font weight, font family, label position, padding, or rotation angle (up to 90°).

Legend

In the Legend tab you can manage how (or if) the legend appears and adjust its appearance. Options include:

Position of legend
Alignment
Box width and height
Text color, font size, font weight, font family

Tip: If the built-in legend layout doesn’t meet your needs, you can hide it and instead add a custom textbox on your canvas for more flexible placement.

Animations

In the Animations tab, you can enhance your chart with dynamic effects:

View Animation: Trigger chart animation when it comes into view.
- Time delay (e.g., 300 = 0.3 seconds) help.vev.design
- Horizontal % in view: for horizontal scroll sections.
- Vertical % in view: for vertical scroll sections. help.vev.design
Scroll Animation: Animate per dataset when the user scrolls.
- By Dataset: each column/dataset animates separately.
- Scroll Length (px): how many pixels to scroll before animation starts.
- Pin when distance (px) from the top: pin the chart when scrolling reaches a set pixel offset.