Line Series
The line method adds a line series. Line series are ideal for visualizing trends, time series and continuous relationships between variables.
Overloads
Below are the different available overloads for adding line data to a Figure object.
| Signature | Description |
|---|---|
line(x, y [, options]) | Pass a list of x and y data and optionally options. |
line(points [, options]) | Pass a list of points [[x[0],y[0]],[x[1],y[1]], ...] and optionally options. |
line(options) | Pass an option. Data is specified through the "data" key ["data": [[x[0],y[0]],[x[1],y[1]], ...]]. Can also be used without data for formatting purposes. |
Quick examples
Figure()
.line([1, 2, 3, 4, 5], [2, 4, 6, 8, 10])
.line([6,7,8,9,10], [2, 4, 6, 8, 10], ["color_by": "data"])
.line([[11,8],[12,8]])
.line([[13,8],[14,8]], ["color_by": "data"])
.line(["data": [[15,8],[16,8]]])
.save("./figures/ex_line_basic")
General Methods
Below are the different available methods for formatting general properties of the current data series.
| Option | Type | Description |
|---|---|---|
name | string | Series name shown in legend and tooltip. |
color_by | string | Color mapping: 'series' (different color for each) or 'data' (different color for each data element). |
clip | boolean | Clip series that overflows the coordinate area. |
Quick examples
Figure()
.line([1, 4, 16, 25, 30, 100], [
"name": "Color by data",
"color_by": "data",
"clip": true
])
.line([2, 3, 10, 15, 26, 100], [
"name": "Unclipped",
"color_by": "series",
"clip": false
])
.x_axis(["name": "$x$", "data": [1,2,3,4,5]])
.y_axis(["name": "$y$", "name_location": "middle"])
.legend()
.save("./figures/ex_line_general")
Line Appearance Methods
Below are the different available methods for formatting the appearance of the line segments connecting the data points.
| Option | Type | Description |
|---|---|---|
smooth | boolean or number | Smooth the line curve. true enables default smoothing; a number between and sets the tension. |
smooth_monotone | string | Constraint axis for smooth: "x" or "y". |
step | boolean or string | Draws a step line instead of a curved line. The string specifies if the point should appear at the "start", "middle" or "end" of each step. Using the boolean true overload defaults to "start" |
Quick examples
Figure()
.line([1, 2, 3, 4, 5], [2, 5, 3, 8, 4], [
"name": "Smooth (0.6, x-monotone)",
"smooth": 0.6,
"smooth_monotone": "x",
"show_symbol": true,
"symbol_size": 6,
"sampling": "average"
])
.line([7, 8, 9, 10, 11], [2, 5, 3, 8, 4], [
"name": "Step data",
"step": true,
"sampling": "average"
])
.legend()
.save("./figures/ex_line_smooth")
Symbol Options
| Option | Type | Description |
|---|---|---|
symbol | string | Symbol shape: "circle", "rect", "roundRect", "triangle", "diamond", "pin", "arrow", "none", or a "path://..." SVG file. |
symbol_size | number or List | Symbol diameter (or [width, height]). |
symbol_rotate | number | Symbol rotation in degrees. |
symbol_offset | List | [x, y] offset from the data point. |
show_symbol | boolean | Whether to display symbols on the line. |
show_all_symbol | boolean or string | Force showing all symbols even on dense category axes. |
Quick examples
Figure()
.line([1, 2, 3, 4, 5], [1, 4, 9, 16, 25], [
"name": "Symbol Options",
"show_symbol": true,
"symbol": "path://M0,0 L10,0 L10,10 L0,10 Z",
"symbol_rotate": 25,
"symbol_offset": [0, -8],
"show_all_symbol": true,
"symbol_size": [8, 30]
])
.line([7, 8, 9, 10, 11, 12, 13, 14, 15, 16], [1, 2, 3, 4, 5, 4, 3, 2, 1, 2], [
"name": "No symbols",
"show_symbol": false
])
.legend()
.save("./figures/ex_line_symbol_options")
line_style(options)
Controls the visual style of the line itself.
| Option | Type | Description |
|---|---|---|
color | Color | Sets the stroke color of the line. |
width | number | Defines the thickness of the line in pixels. |
type | string or List | Controls the line style. Can be 'solid', 'dashed', 'dotted', or a custom dash pattern array such as [5, 10], where numbers specify dash and gap lengths. |
dash_offset | number | Sets the starting offset of the dash pattern, shifting where the pattern begins rendering. |
cap | string | Defines the shape of the line endings. Can be 'butt', 'round', or 'square'. |
join | string | Defines how connected line segments are rendered. Can be 'bevel', 'round', or 'miter'. |
miter_limit | number | Sets the maximum ratio of miter length to line width before the join is rendered as 'bevel' instead of 'miter'. |
shadow_blur | number | Controls the blur radius of the line’s shadow. Higher values create a softer shadow. |
shadow_color | Color | Sets the color of the line’s shadow. |
shadow_offset_x | number | Sets the horizontal offset of the shadow relative to the line. |
shadow_offset_y | number | Sets the vertical offset of the shadow relative to the line. |
opacity | number | Sets the transparency of the line, where is fully transparent and is fully opaque. |
Quick examples
Figure()
.line([1, 2, 3, 4, 5], [1, 4, 9, 16, 25], [
"name": "Solid Round",
"color": "#FF6B6B",
"line_style": [
"color": "#FF6B6B",
"width": 4,
"type": "solid",
"cap": "round",
"join": "round",
"opacity": 0.5
],
"show_symbol": false
])
.line([7, 8, 9, 10, 11], [2, 5, 10, 17, 26], [
"name": "Dashed with Shadow",
"color": "#5470C6",
"line_style": [
"color": "#5470C6",
"width": 3,
"type": "dashed",
"dash_offset" : 5,
"cap": "butt",
"join": "bevel",
"opacity": 0.8,
"shadow_blur": 5,
"shadow_color": "rgba(227, 36, 36, 0.86)",
"shadow_offset_x": 5,
"shadow_offset_y": 10
],
"show_symbol": false
])
.line([13, 14, 15, 16, 17], [3, 6, 11, 18, 27], [
"name": "Dotted",
"color": "#91CC75",
"line_style": [
"color": "#91CC75",
"type": "dotted",
"width": 4
],
"show_symbol": false
])
.legend()
.save("./figures/ex_line_style")
area_style(options)
Fills the area between the line and the axis origin.
| Option | Type | Description |
|---|---|---|
color | Color | Sets the fill color of the area under the line. |
origin | string or number | Defines the baseline from which the area is filled. Can be 'auto', 'start', 'end', or a specific numeric axis value. |
opacity | number | Sets the transparency of the filled area, where is fully transparent and is fully opaque. |
shadow_blur | number | Controls the blur radius of the area’s shadow. Higher values create a softer shadow. |
shadow_color | Color | Sets the color of the area’s shadow. |
shadow_offset_x | number | Sets the horizontal offset of the area’s shadow relative to the shape. |
shadow_offset_y | number | Sets the vertical offset of the area’s shadow relative to the shape. |
Quick examples
Figure()
.line([1, 2, 3, 4, 5], [1, 4, 9, 16, 25], [
"name": "Auto Origin",
"color": "#5470C6",
"area_style": [
"color": "#5470C6",
"opacity": 0.4,
"origin": "auto"
]
])
.line([7, 8, 9, 10, 11], [2, 5, 10, 17, 26], [
"name": "With Shadow",
"color": "#91CC75",
"area_style": [
"color": "#91CC75",
"opacity": 0.5,
"origin": "start",
"shadow_blur": 5,
"shadow_color": "rgba(145, 204, 117, 0.5)",
"shadow_offset_x": 10,
"shadow_offset_y": 10
]
])
.line([13, 14, 15, 16, 17], [3, 6, 11, 18, 27], [
"name": "Custom Origin",
"color": "#FF6B6B",
"area_style": [
"color": "#FF6B6B",
"opacity": 0.3,
"origin": 10
]
])
.legend()
.save("./figures/ex_line_area_style")
item_style(options)
Controls the visual style of the symbol markers.
| Option | Type | Description |
|---|---|---|
color | Color | Sets the fill color of the symbol. |
border_color | Color | Sets the stroke color of the symbol’s border. |
border_width | number | Defines the width of the symbol’s border in pixels. |
border_type | string or List | Defines the border style. Can be 'solid', 'dashed', 'dotted', or a custom dash pattern array such as [5, 10]. |
opacity | number | Sets the transparency of the symbol, where 0 is fully transparent and 1 is fully opaque. |
shadow_blur | number | Controls the blur radius of the symbol’s shadow. Higher values create a softer shadow. |
shadow_color | Color | Sets the color of the symbol’s shadow. |
Quick examples
Figure()
.line([1, 2, 3, 4, 5], [1, 4, 9, 16, 25], [
"name": "Solid Border",
"show_symbol": true,
"symbol": "circle",
"symbol_size": 8,
"color": "#91CC75",
"item_style": [
"color": "#91CC75",
"border_color": "#2E5C3E",
"border_width": 2,
"opacity": 1.0
]
])
.line([7, 8, 9, 10, 11], [2, 5, 10, 17, 26], [
"name": "With Shadow",
"show_symbol": true,
"symbol": "rect",
"symbol_size": 8,
"color": "#5470C6",
"item_style": [
"color": "#5470C6",
"border_color": "#1E3A8A",
"border_width": 1,
"opacity": 0.9,
"shadow_blur": 4,
"shadow_color": "rgba(238, 7, 7, 0.97)"
]
])
.line([13, 14, 15, 16, 17], [3, 6, 11, 18, 27], [
"name": "Dashed Border",
"show_symbol": true,
"symbol": "diamond",
"symbol_size": 30,
"color": "#FF6B6B",
"item_style": [
"color": "#FF6B6B",
"border_color": "#DC2626",
"border_width": 2,
"border_type": "dashed",
"opacity": 0.8
]
])
.legend()
.save("./figures/ex_line_item_style")
label(options)
Labels rendered at each data point.
| Option | Type | Description |
|---|---|---|
show | boolean | Controls whether labels are displayed for the series. |
position | string or List | Sets the label position. Can be a preset such as 'top', 'bottom', 'left', 'right', 'inside', etc., or an explicit coordinate offset like [x, y]. |
distance | number | Defines the distance in pixels between the label and its associated symbol or data point. |
rotate | number | Sets the rotation angle of the label text in degrees. Positive values rotate clockwise. |
color | Color | Sets the text color of the label. Accepts any valid ECharts color value. |
font_size | number | Defines the font size of the label text in pixels. |
font_weight | string or number | Sets the font weight of the label text (e.g. 'normal', 'bold', or numeric values such as 400, 700). |
font_family | string | Sets the font family used for the label text. |
Quick examples
Figure()
.line([1, 2, 3, 4, 5], [1, 4, 9, 16, 25], [
"name": "Top Position",
"show_symbol": true,
"color": "#3f3dc2",
"label": [
"show": true,
"position": "top",
"distance": 5,
"rotate": 0,
"color": "#120ef1",
"font_size": 12,
"font_weight": "bold"
]
])
.line([7, 8, 9, 10, 11], [2, 5, 10, 17, 26], [
"name": "Rotate",
"show_symbol": true,
"color": "#a90d0d",
"label": [
"show": true,
"distance": 8,
"rotate": 45,
"color": "#FF6B6B",
"font_size": 10,
"font_weight": "normal",
"font_family": "monospace"
]
])
.line([13, 14, 15, 16, 17], [3, 6, 11, 18, 27], [
"name": "Right Position",
"show_symbol": true,
"color": "#07540b",
"label": [
"show": true,
"position": "right",
"distance": 8,
"color": "#0eee19",
"font_size": 11,
"font_weight": "bold"
]
])
.legend()
.save("./figures/ex_line_label")
end_label(options)
A label displayed at the end of the line. Accepts the same sub-options as label.
Quick examples
Figure()
.line([1, 2, 3, 4, 5], [1, 4, 9, 16, 25], [
"name": "End 1",
"color": "#FF6B6B",
"end_label": [
"show": true,
"position": "right",
"formatter": "Max: {c}",
"color": "#FF6B6B",
"font_size": 14,
"font_weight": "bold"
]
])
.line([7, 8, 9, 10, 11], [2, 5, 10, 17, 26], [
"name": "End 2",
"color": "#5470C6",
"end_label": [
"show": true,
"position": "right",
"formatter": "End: {c}",
"color": "#5470C6",
"font_size": 12,
"font_weight": "normal"
]
])
.legend()
.save("./figures/ex_line_end_label")