LumaxForge
ZH EN

Editor Workflow and Panel Guide

This chapter helps you understand what to edit where in EasyChart/Library Editor, and the common editing workflows (create, clone, preview, export).

1. What are you editing? (ChartProfile)

The chart selected in the Library Editor is essentially a ChartProfile asset.

  • It is a reusable configuration: the same Profile can be referenced by multiple scenes/prefabs.
  • It is a previewable configuration: after modifying it in the editor, you can see the preview update immediately.

Recommendation: put your own Profiles under Assets/EasyChart/Library/Custom/ (or a folder agreed by your team).

2. The three core areas of the Library Editor

Although UI details may change slightly across versions, you can understand the overall layout like this:

2.1 Left: Library Tree

This shows the folder structure where chart assets (ChartProfile) are located.

Common actions:

  • Right-click a folder:

    • - New Folder...: create a subfolder - New Chart...: create a new ChartProfile

  • Right-click a chart:

    • - Clone: duplicate a new Profile (to create variants) - Export to UXML: export (if your workflow needs to sync/export configuration into UXML) - Ping: locate the asset in the Project window - Rename... / Delete

Tip: use Clone to create variants like "same chart with different colors / different data scale", instead of configuring from scratch.

2.2 Right: Inspector

This is where you do most of your editing.

It typically includes:

  • Basic settings:

    • - coordinateSystem - padding (if present) - animationDuration (if present)

  • Series list: each Serie represents a line, a group of bars, a scatter series, etc.
  • Axes:

    • - choose which XAxisId/YAxisId to use - configure display/labels/range/ticks of the corresponding AxisConfig

  • Legend / Tooltip / Grid: if your version exposes these settings
Practical tip: configure coordinateSystem, Series, and Axes first. The rest is "nice to have".

2.3 Preview

Use it to check:

  • whether data exists
  • whether axis ranges are correct
  • whether labels are crowded/misaligned
  • Tooltip / Legend interactions (if enabled)

When preview looks wrong, troubleshoot in this order:

  1. Is coordinateSystem correct?
  2. Does series contain at least 1 serie and data points?
  3. Does the axis axisType match the meaning of your data x/y?
  4. Is the Value axis range locked manually (autoRangeMin/autoRangeMax)?

2.4 JSON Injection

Below the left panel there is a JSON Injection area, used to:

  • quickly generate an "injection JSON example" for the selected ChartProfile
  • apply your pasted/edited JSON back to the selected Profile (ApplyToChart)

Common controls:

  • API Envelope: whether to wrap with { code, message, data }.

    • - When enabled: generated JSON will be wrapped; parsing can also recognize it and automatically extract data.

  • Feed Mode: the structure/field completeness of the example JSON (to support different injection protocols).
  • Datas Format: the point format inside the datas field (e.g. compact arrays, or more readable objects).
  • ApplyToChart: parse JSON from the text box and write it back into the selected ChartProfile.

3. Recommended editing flow (from zero to reusable)

Step 1: Create or select a ChartProfile

  • New: right-click the target folder and choose New Chart...
  • Existing: click to select in the left tree

If you prefer the "clone first, then modify" approach (recommended):

  • First, use Clone in the top toolbar to create your own Library
  • Then in your own library, right-click a Profile -> Clone to create variants

Step 2: Decide the coordinate system

  • Cartesian2D: Line/Bar/Scatter/Heatmap
  • Polar2D: Radar
Tip: decide the coordinate system first, then choose SeriesType, to avoid style/axis confusion after switching later.

Step 3: Configure Series

  • Add Series
  • Set type
  • Fill seriesData

Tip: start with a small number of points (3–8) to validate the look, then scale up.

Step 4: Configure Axes

Most common combination:

  • X: Category

    • - put text into labels

  • Y: Value

    • - enable auto range (default)

When you want more professional axis formatting:

  • Use labelFormat (e.g. F1, N0)
  • Use autoRangeMin/autoRangeMax to lock only one side of the range
  • If the Value axis needs a unit:

    • - showUnit=true - unitText="items"/"10k" - use unitLabelStyle to adjust font/color/position

Step 5: Clone variants (recommended)

When you need multiple versions of the same chart (colors, font size, slightly different axis display):

  • Right-click the chart -> Clone
  • Modify only the differences

This keeps style consistent and is easier for version management.

When you want to use the chart in UI:

  • UI Toolkit: export to UXML, then compose the page in UI Builder (see demo scene Assets/EasyChart/Demo/Scenes/EasyChart_QuickStart.unity and template Assets/EasyChart/Demo/UIToolKit/NewUXMLTemplate.uxml)
  • UGUI: export to a UGUI prefab and use it in a Canvas/RectTransform workflow

4. Common pitfalls (quick diagnosis)

  • Nothing shows up

    • - Is seriesData empty? - Does AxisType match the meaning of your data (does the Category axis have labels)?

  • Value axis looks weird (range too large/too small)

    • - Check autoRangeMin/autoRangeMax - Check whether rounding/unit snapped the range to an unsuitable unit

  • Bars and labels are misaligned

    • - Check LabelPlacement (Tick vs CellCenter)

Next

  • 00_02-WorkflowAndLibrary.md: axis types, label placement, auto range, rounding, and unit display are merged into section 7