Line EChart

Line ECharts are ideal for visualizing data trends over time. By connecting data points with lines, they make it easy to identify patterns, fluctuations, and shifts in historical data. This article walks you through creating, configuring, and customizing Line ECharts in Wyn Enterprise.

Create a Line EChart

Go to the Resource or Document Portal.
Click + Create > Create Dashboard.
Choose a Blank Dashboard or a template and click Create.
From the Custom Visualization tab in the Designer Toolbox, drag and drop the Line Chart (ECharts) into the canvas.

Bind Data to the Chart

Select the Line EChart and choose a dataset from the Choose Data dropdown.
Drag fields to:
- Values – Measures for the line.
- Axis (Category) – Time or categories along the X-axis.
- Legend (Series) – To split the data into series.
- Tooltip – Additional data to display on hover.

Optional: Choose a Drill Down Mode (Default, Pre-set Targets, Pre-set Path).

Format Data Attributes

Click the gear icon in each data field container to access formatting options:

Aggregation Method – Choose Sum, Average, Max, Min, Count, etc.
Quick Functions – Apply calculations like running totals, rankings, or moving averages.
Filter – Show only relevant data.
Rename – Label fields for clarity.
Remove – Delete a field from the chart.
Tooltip Settings – Customize background, fonts, and included fields.

Analyze Chart Data

Use the Action Bar tools above the chart for in-depth analysis:

Filter – Refine chart data.
Sort – Reorder data by value or category.
Conditional Visualization – Highlight or rank values.
Data Binding – Reassign data fields.
Reference Line – Add static lines for thresholds or goals.
Show Data – View data in a tabular format.
Focus – Expand the chart to full screen.

Customize Chart Appearance

Chart Style

Chart Type – Choose Line, Area, or Stacked Area.
Line Style – Use Default, Spline, or Step lines.
Line Type & Thickness – Adjust line appearance.
Symbols – Show data points with customizable shapes and sizes.
Null Handling – Choose to connect or leave gaps for nulls.
Mark Points – Highlight min/max values.
Color Settings – Customize via palette or assign manually.
Canvas Padding – Adjust chart spacing.
Custom Options – Use JavaScript for advanced styling or behavior.

Animation

Apply entrance animations (e.g., SlideIn, BackIn) with custom delay and duration.

Data Visualization

Auto Carousel – Cycle through points automatically.
Show Zoom Axis – Enable zoom controls.
Include All Dimensions – Include null labels.

Data Labels

Toggle labels on/off and customize layout, font, and line styles.
Movable Labels – Manually adjust label positions.

Axes Configuration

Category (X) Axis

Toggle axis, title, grid lines, tick marks, and labels.
Customize axis position, font, color, and overflow behavior.

Value (Y) Axis

Set min/max values, intervals, and units.
Toggle grid lines, title, and axis visibility.
Format numbers and customize label styles.

For further customization using code, refer to the ECharts Custom Behavior documentation.