BeCharts
Back to Docs

BeCharts usage guide

Learn how to create, customize, and export charts in BeCharts.

This guide explains how to create, edit, and export charts with BeCharts, covering the web editor, template presets, and data workflows end to end.

Table of contents

  1. Product overview and entry points
  2. Layout (web editor)
  3. Create a chart
  4. Customize
  5. Dataset
  6. Export and copy
  7. AI assistant
  8. Other features
  9. Licensing and usage limits
  10. Troubleshooting

1. Product overview and entry points

BeCharts is a charting tool built on Apache ECharts. It supports:

  • Web app: Create and edit charts in the browser at /editor
  • Templates: Browse and pick preset chart templates at /templates
  • Chart makers: Task-focused landing pages (for example /bar-chart-maker) with templates, FAQs, and export tips

Quick start: Open the home page and click Start Creating, or go directly to /editor. Choose a chart type on the left, pick a preset to start, then use Customize to style and Dataset to edit or import data. Finally, export SVG, PNG, or PDF, or copy JSON from the actions menu.

2. Layout (web editor)

At /editor, the UI is split into these areas:

AreaDescription
LeftChart types: Select the chart type you are editing (line, bar, pie, radar, etc.)
CenterPreview: Renders the current ECharts option with zoom and pan
Lower centerPresets: Templates for the selected type; click to switch
Top rightActions: Import JSON, paste config, copy to clipboard, menu, and more
RightCustomize / Dataset tabs: Switch between styling and data workflows

The right panel has two tabs:

  • Customize: Appearance, series, axes, legend, title, and more
  • Dataset: Import or edit data, generate random data, export CSV, and more

3. Create a chart

3.1 Choose a chart type

Pick a type from the left (line, bar, pie, radar, gauge, and others). The preview updates and the Preset charts list switches to that type.

For chart-specific templates, FAQs, and walkthroughs, use the matching page when available—for example the bar chart maker or line chart maker—or browse layouts in the template gallery.

BeCharts supports a broad set of chart types, including:

  • Basics: line, bar, pie, scatter
  • Advanced: radar, gauge, funnel, polar
  • Hierarchy: sunburst, treemap
  • Relationships: sankey, graph, chord
  • Statistics: boxplot, heatmap, candlestick
  • Others: theme river, calendar, parallel, matrix, combo, and more

3.2 Start from a preset

In Preset charts, click any thumbnail to replace the current option with that preset's full ECharts configuration.

  • If the preset is a custom chart you saved (creator is USER), you can remove it from the preset list.
  • Switching chart types also switches the preset set.

3.3 Use the templates

In Templates (/templates) you can browse presets by chart type. Selecting a chart can open the editor and load that chart depending on current routing and sharing behavior.

4. Customize

In the Customize tab, sections appear based on what the current option contains. Common sections include:

4.1 Appearance

  • Colors: Series colors and palettes
  • Visual map: Continuous or piecewise mapping (when available)
  • Background: Chart background color
  • Font: Global or component font (when supported)
  • Size: Canvas width and height, including size presets
  • Grid: Cartesian padding and margins

4.2 Size presets

Use Appearance → Size to pick presets for common social formats or standard aspect ratios.

4.3 Series

Series options vary by chart type: line styles, area fill, symbols, labels, color mapping, and more.

4.4 Axes and other components

Axes and components like Polar, Calendar, VisualMap, Legend, and Title appear only when the option includes them.

5. Dataset

In Dataset, you can import, edit, and export data. Supported workflows include CSV and Excel upload, paste from spreadsheets, and table editing for many chart types. Very large datasets (for example source greater than 500 rows) may hide the inline edit UI.

6. Export and copy

The preview quick actions support exporting SVG, PNG, and PDF, hand-drawn mode, the AI assistant, and zoom controls. The top-right menu supports importing JSON, pasting a config, and copying the current option.

7. AI assistant

Use AI Assistant to describe what you want in natural language and generate an ECharts option. This feature depends on your backend DeepSeek API configuration.

8. Other features

Includes hand-drawn rendering, zoom and pan, and saving custom charts to your preset list.

9. Licensing and usage limits

Some capabilities may have free usage limits. Upgrading to Pro unlocks more features.

10. Troubleshooting

For issues like importing JSON or CSV, font problems during export, or AI failures, follow the on-screen hints and error messages. For chart-type guidance, see the template gallery or the relevant maker page from the site footer or feature menu.