Line Chart¶

Note

This widget already supports the new configuration panel, and this topic describes the new panel by default. You can switch panels at any time in the upper right corner of the chart configuration panel without affecting your configuration.

A line chart uses a continuous line to show how data changes across a dimension, which suits time series and other continuous variables. It belongs to the same widget as the bar chart and the scatter chart, so a single chart can mix line, area, dot-line, bar, and other series types.

This topic describes the configuration items specific to the line chart. For the items common to all charts, such as the Filter tab and the Others tab, see Common Configurations for Charts.

Types of Line Chart¶

When adding a line chart, you can choose from the following presets:

Line chart preset	Description	Recommended scenario
Basic Line	Shows how data changes across a dimension as a line, and can stack several series.	Showing trends over a time series or a continuous variable, such as device power over time.
With Point	Marks every data point on the line, with a configurable point shape and size.	When there are few data points and each value needs to be located precisely, such as a monthly output comparison.
Basic Area Chart	Fills the area below the line with color, emphasizing the cumulative amount or range visually.	Showing how a total or a share changes over time, such as cumulative generation or the value distribution of several series.

Note

The line chart shares one widget and one configuration panel with the Bar Chart and the Scatter Chart; they differ only in the default series type of their presets. The configuration items described here therefore overlap heavily with the bar chart documentation, and only the type-specific items inside a series differ.

Data of Line Chart¶

The line chart centers on measurements, uses dimensions to define the category axis, and can use a comparison field to produce several lines. For data sources, data fields, aggregation, and sorting, see Common Configurations for Charts > Configuring Data.

Dimension¶

Dimension defines the labels on the category axis. Each dimension value corresponds to one tick on the axis and determines the order of the data points along the line. A time field such as localtime or a categorical field such as a device number or a region is typically used.

A line chart accepts up to 2 dimension fields, but the chart only uses the first dimension as the category axis; the second has no effect on the display. In the vertical layout the categories appear on the X-axis; in the horizontal layout they appear on the Y-axis.

Comparison¶

Comparison is optional and accepts up to 1 field. It splits one measurement into several lines by the values of that field. For example, once deviceId is used as the comparison, each device is drawn as its own line, which makes trend differences easy to compare within one coordinate system.

A comparison field only takes effect once Comparison is selected in the series. See Common Configurations for Charts > Series.

Measurement¶

Measurement determines the value at each tick, that is the rise and fall of the line. At least 1 measurement is required, with no upper limit. Each series binds one measurement, and a single chart can mix line, area, dot-line, and other series types.

Extension¶

Extension fields are not drawn on the line chart directly. There is no limit on the number, and they have two uses:

Data source of a highlight area: The Data Field of a highlight area lists only the extension fields you have added, and the chart determines the range to highlight from the value of that field. To highlight certain ranges, such as marking a fault period, add the field to Extension first and then reference it in Highlight Area.
Bubble size: When the series type is Bubble, select an extension field in Data Field of the series, and the chart scales the bubble size by the value of that field.

Note

The tooltip of the line chart does not show extension fields. Adding extension fields without referencing them in a Highlight Area or a Bubble series changes nothing in the chart.

Style of Line Chart¶

The style items are organized into six sections: Title, Widget, Series, Coordinate Axis, Legend, and Mark. For the items common to all charts, see Common Configurations for Charts > Configuring Style.

Series¶

In addition to the common items, the Line, Area, and Dot-Line series types share the following type-specific item:

Line Type: A configuration block containing the line style (solid by default, with dashed, dotted, and other options), Line Width (2 px by default), and Smooth. When Smooth is selected, the line is drawn as a curve, which suits emphasizing the overall trend rather than exact values; cleared by default. When showing predicted or uncertain data, change the line style to dashed to distinguish it from historical data.

On top of that, Area and Dot-Line each add one item:

Area Color (Area only): Sets the color of the filled area below the line. Solid and gradient colors are supported, and it is set separately from the Color of the line itself. For example, use a semi-transparent gradient as the fill and a solid color as the line.
Dot (Dot-Line only): A configuration block containing the Shape and Size of the data points. The shape can be Square, Dot (default), Circle, Rounded Square, Triangle, Diamond, Bubble, or Arrow; the default size is 8 px.

Note

If a Bar series is mixed into a line chart, the Series section additionally shows Bar Spacing and Stacked Bar Chart; Maximum Bar Width has no such condition and is shown even without a bar series. For descriptions of all three, see Common Configurations for Charts > Series.

Interactions at Runtime¶

The line chart shares one widget with the bar chart, the scatter chart, and the box plot, and its runtime interactions are identical: the tooltip highlights by category and lists the value of each series, selecting a legend item hides a series, selecting Show Scalar Bar lets users drag the scalar bar to zoom, selecting Enable Selection Zooming lets users drag a rectangle to zoom in, configuring widget linkage lets users select a data point to trigger linkage, and charts that share a Link Group ID zoom together.

For the trigger conditions and details of each, see Bar Chart > Interactions at Runtime.