Create beautiful data visualizations with bar charts, line graphs, pie charts, donut charts, and more. Perfect for dashboards, reports, presentations, and analytics interfaces.
Opening Chart Generator
Open the Actions panel
Click the Actions button in the floating toolbar.
Go to Plugins
Select the Plugins & widgets tab.
Launch Chart Generator
Click Chart Generator to open the chart builder.
Available Chart Types
Bar Charts
Compare values across categories:
- Vertical bars - Standard column charts
- Horizontal bars - Great for long category names
- Grouped bars - Compare multiple series side-by-side
- Stacked bars - Show part-to-whole relationships
Line Charts
Visualize trends over time:
- Single line - Track one metric over time
- Multiple lines - Compare multiple trends
- Area charts - Filled areas under lines
- Stacked areas - Cumulative values over time
Pie & Donut Charts
Show proportions and percentages:
- Pie chart - Classic circular chart
- Donut chart - Pie with center hole for text
- Semi-circle - Half pie for gauges
Specialized Charts
- Scatter plots - Show correlation between two variables
- Bubble charts - Scatter plots with size dimension
- Radar charts - Compare multiple variables radially
Creating a Chart
Choose chart type
Select the chart type that best represents your data.
Enter data
Input your data values and labels. You can enter data manually or use the random data generator for mockups.
Customize appearance
Choose colors, adjust sizing, and configure visual options.
Insert chart
Click Insert to add the chart to your canvas as a group of vector elements.
Data Input Methods
Manual Entry
Enter values one by one:
- Type label names (e.g., "Q1", "Q2", "Q3")
- Enter corresponding values (e.g., 45, 67, 82)
- Add or remove data points as needed
Random Data Generator
Quickly create mockup charts:
- Click Generate Random Data
- Specify number of data points (default: 5)
- Set value range (e.g., 0-100)
- Labels are auto-generated (Category 1, Category 2, etc.)
Use the random data generator for quick prototypes, then replace with real data later by editing the chart elements directly on canvas.
Customization Options
Colors
- Single color - All bars/slices the same color
- Color palette - Choose from preset color schemes
- Custom colors - Set individual colors per data point
- Gradients - Apply gradient fills for modern look
Labels & Text
- Category labels - Show/hide axis labels
- Value labels - Display data values on chart
- Legend - Add legend for multi-series charts
- Title - Chart title and subtitle
Visual Style
- Bar spacing - Gap between bars
- Corner radius - Rounded bar corners
- Stroke - Outline thickness and color
- Grid lines - Show/hide background grid
Working with Charts
Editing Chart Data
Charts are inserted as grouped vector elements:
- Double-click to enter the group
- Select individual bars, lines, or slices
- Adjust heights, widths, or positions manually
- Change colors using the Properties Panel
Resizing Charts
Maintain proportions when scaling:
- Select the entire chart group
- Hold
Shiftwhile dragging a corner handle - Or use the Properties Panel to set exact dimensions
Styling Chart Elements
Customize individual components:
- Bars/slices - Change fills, add gradients, apply effects
- Text labels - Adjust font, size, color, alignment
- Axes - Modify line thickness, color, style
- Grid lines - Change opacity, dash pattern
Common Use Cases
Dashboard Design
Build analytics dashboards:
- Create KPI cards with donut charts showing percentages
- Use line charts for time-series metrics
- Show comparisons with grouped bar charts
- Maintain consistent color schemes across all charts
Presentation Slides
Visualize data for presentations:
- Use pie charts for market share breakdowns
- Show growth trends with area charts
- Compare performance with horizontal bar charts
- Keep designs simple and high-contrast for readability
Mobile App Screens
Design data visualization features:
- Small donut charts for at-a-glance metrics
- Sparkline charts for compact trend indicators
- Simple bar charts for category comparisons
- Ensure charts are readable at mobile sizes
Chart Design Best Practices
Choosing the Right Chart
| Data Type | Best Chart |
|---|---|
| Comparison across categories | Bar chart |
| Trends over time | Line chart |
| Part-to-whole (percentages) | Pie/Donut chart |
| Correlation between variables | Scatter plot |
| Distribution across ranges | Histogram |
Color Guidelines
- Use consistent colors for the same categories across charts
- Ensure sufficient contrast between colors (especially for accessibility)
- Avoid red-green combinations (colorblind-friendly)
- Use neutral backgrounds so chart colors stand out
Data Accuracy
- Start y-axis at zero for bar charts (avoid misleading visuals)
- Use appropriate scales for your data range
- Don't truncate axes unless clearly indicated
- Label axes clearly with units (%, $, etc.)
Limit pie charts to 5-7 slices maximum. Too many slices become hard to distinguish and read. Consider grouping small values into "Other" category.
Animation & Interactivity
For Prototypes
Add visual interest to your designs:
- Create animation variants showing progressive chart states
- Design hover states with highlighted bars or data points
- Show tooltip mockups with detailed data values
Export for Implementation
Prepare charts for developers:
- Export individual chart elements as separate SVGs
- Document color values and spacing in a style guide
- Provide data structure examples
Tips & Tricks
Creating Chart Templates
- Design a well-styled chart with your brand colors
- Save it as a Component
- Reuse the component and swap data as needed
Maintaining Consistency
- Define a chart style guide (colors, fonts, sizes)
- Use the same chart dimensions across similar visualizations
- Keep label formatting consistent (decimal places, units)
Performance Optimization
- Group chart elements to reduce layer complexity
- Flatten complex charts before exporting
- Use components to reduce file size when reusing charts