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, templates 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 (/[locale]/editor)
  • Templates: Browse and pick preset chart templates (/templates)

Supported UI languages include English, Chinese, Japanese, German, French, Korean, Spanish, Russian, Italian, Portuguese, and Hindi. You can switch the UI language from the language switcher in the top-right menu.

Quick start: Open the home page and click Start Creating, or go directly to /editor when using English (default locale), or /{locale}/editor for other languages (for example, /zh/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/PDF or copy JSON from the actions menu.

2. Layout (web editor)

In the Web app (for example /editor in English, or /zh/editor in Chinese), the UI is split into these areas:

AreaDescription
LeftChart types: Select the chart type you’re 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, language, menu, etc.
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/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, etc.). The preview updates and the Preset charts list switches to that type.

If you want chart-specific notes (recommended data shape, import/edit support, and key Customize options), see Chart types: /docs/chart-types.

BeCharts supports a broad set of chart types, including:

  • Basics: line, bar, pie, scatter
  • Advanced: radar, gauge, funnel, polar
  • Hierarchy: sunburst, treemap, tree
  • Relationships: sankey, graph, chord
  • Statistics: boxplot, heatmap, candlestick
  • Others: theme river, pictorial bar, calendar, map, 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/piecewise mapping (when available)
  • Background: Chart background color
  • Font: Global/component font (when supported)
  • Size: Canvas width/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.

6. Export and copy

The preview’s quick actions support exporting SVG/PNG/PDF, hand-drawn mode, 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/pan, language switching, and saving custom charts.

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/CSV, font problems during export, or AI failures, follow the on-screen hints and error messages.