Line Chart

Line Chart is a graph formed by connecting data points with straight line segments, which can intuitively display data change trends. Line charts are often used to analyze data trends over time, and can also be used to analyze the interaction and influence of multiple groups of data changes over time.

For example, we can use line charts to analyze the sales situation of a certain type of product or several related types of products over time, so as to further predict future sales. In a line chart, the horizontal axis (X-axis) is generally used to represent the passage of time at equal intervals; while the vertical axis (Y-axis) represents the size of the data at different times.

Advantages: Line charts are easy to understand and can be used to analyze the interaction and influence of multiple groups of data changes over time, and trends can be immediately perceived.

Disadvantages: Using multiple lines in a line chart can lead to confusion and difficulty in interpretation. Therefore, avoid using more than two or three metrics.

Settings

Data Settings

Setting Item	Description
Data Source	Select the data source for the line chart. One chart can only select one data source, and multiple compound charts can be added under the same or different X and Y axes.
Coordinate System Type	Select which coordinate axis the data is displayed under. Options: Polar Coordinate System, 2D Cartesian Coordinate System, polar coordinate supplement see the end of the article.
Name Field	Select the field returned by the data source, which is used for the name display of the line chart label, usually combined with the Floating Display menu for display.
X-axis Field	In the Cartesian coordinate system, select the field returned by the Data Source menu and set it as the horizontal axis of the line chart.
Y-axis Field	In the Cartesian coordinate system, select the field returned by the Data Source menu and set it as the vertical axis of the line chart.
Radius Field	In the polar coordinate system, select the field returned by the Data Source menu and set it as the radius value of the polar coordinate.
Angle Field	In the polar coordinate system, select the field returned by the Data Source menu and set it as the grouping angle of the polar coordinate.

Chart Settings

Setting Item	Description
X-axis	Select the X-axis where the line chart is located, multiple X-axes can be added in the X-axis menu.
Y-axis	Configure the Y-axis where the line chart is located, multiple Y-axes can be added in the Y-axis menu.
Color Allocation Type	Configure the color effect of the graphics in the line chart. Options: Allocate colors in the palette by chart, Allocate colors in the palette by data item. When multiple charts are aggregated, you can choose to allocate by chart, and for a single chart, you can choose to allocate by data item. The specific color values can be adjusted in the Style menu palette.
Display Graphics	Configure whether to enable the display of graphic identifiers on the corresponding value points of the line chart.
Graphic Style	Select the style of the graphics at each value point in the line chart. Options: Hollow Circle, Dot, Rectangle, Rounded Rectangle, Triangle, Diamond, Needle, Arrow, None.
Graphic Size	Configure the size of the value point graphics.
Graphic Rotation Angle	Configure the rotation angle of the value point graphics.
Display as Step Chart	Configure whether the display form of the line chart is Step style, which has higher priority than Smooth Curve Display.
Smooth Curve Display	Configure whether the display form of the line chart is Smooth curve.

Label Settings

Setting Item	Description
Display Label	Turn on or off the display of labels on the line chart.
Display Content Expression	You can customize and edit expression syntax to achieve complex scene content display. The display priority is lower than [Display Content].
Display Content	You can edit the label display content, which does not support complex expression syntax except prompt content. The display priority is higher than [Display Content Expression].
Position	You can choose the display position of the label on the line segment.
Distance from Graphic	Set the distance of the label from the value point in the line chart.
Label Rotation	Set the rotation angle of the label.
Text Offset X	Set the distance of the label from the X-axis.
Text Offset Y	Set the distance of the label from the Y-axis.
Color	Set the color of the label text.
Background Color	Set the background color of the label text, which needs to be used together with parameters such as line height, padding, width, and height in the text style to take effect.
Text Style	Set the label text to italic or normal mode.
Font Weight	Set the label font weight. Options: Default, Bold, Very Bold, Thin.
Font	Set the label font style. Options: sans-serif, serif, monospace, Arial, Courier NEW.
Font Size	Set the label font size. The font size is not less than 12 and cannot exceed 100.
Horizontal Alignment	Set the horizontal alignment of the label text, including four ways: auto, left, center, and right.
Vertical Alignment	Set the vertical alignment of the label text, including four ways: auto, top, center, and bottom.
Line Height	Set the line height of the label text, which takes effect after the Exceed Width Handling of the text selects the line wrap option.
Padding	Set the distance length of the label text in the background box.
Width	Set the maximum display width of the label text, generally need to be combined with Exceed Width Handling for line wrap and other configurations.
Height	Set the display height of the label text, which only affects the height of the text background, not the display of the text itself.
Exceed Width Handling	The processing method after the label exceeds the maximum width, including two types: line wrap and truncation and ellipsis display. If set to None, the maximum width will not take effect.
Stroke Width	Set the stroke width of the label background image, which takes effect after setting the stroke color.
Stroke Color	Set the stroke color value of the label background.
Stroke Radius	Set the stroke radius angle of the label background.
Shadow Color	Set the shadow color of the label background, which takes effect after setting the label background color and shadow size.
Shadow Size	Set the shadow size of the label background.
Shadow Horizontal Offset	Set the offset distance of the label background shadow in the horizontal direction.
Shadow Vertical Offset	Set the offset distance of the label background shadow in the vertical direction.

Line Style

Setting Item	Description
Graphic Color	Set the color effect of the line chart lines.
Border Color	Set the color effect of the line border.
Stroke Type	Configure the stroke type of the line. Options: Solid Line, Dashed Line, Dotted Line.
Stroke Width	Set the stroke width of the line.
Stroke Color	Set the stroke color of the line.
Stroke Radius	Set the stroke radius angle of the line.
Shadow Color	Set the shadow color value of the line.
Shadow Size	Set the shadow size of the line.
Shadow Horizontal Offset	Set the offset of the line's shadow in the horizontal direction.
Shadow Vertical Offset	Set the offset of the line's shadow in the vertical direction.
Opacity	Set the opacity of the line, the opacity value ranges from 0 to 1.

Label Layout

Setting Item	Description
Hide Overlapping Labels	When enabled, labels with overlapping content will be hidden.
Overlapping Offset Direction	When labels overlap, you can choose the direction of label displacement, and you can choose two ways: horizontal or vertical displacement.

Highlight Settings

Setting Item	Description
Disable Highlight	After disabling highlight, the label will no longer be highlighted when the mouse moves to the label position.
Behavior on Highlight	Set the interactive style of highlight display.
Fade Out Range	Set the selection range for interactive interface fade out when highlighting, providing three ways: fade out coordinate system, fade out chart or global fade out.

Area Chart Settings

Setting Item	Description
Enable Area	Turn on or off the display mode of the line chart filled by area.
Fill Mode	You can choose the mode of area filling, including three filling modes: from the bottom of the coordinate axis to the data, from the coordinate axis line to the data, and from the top of the coordinate axis to the data.
Color	Solid color filling or gradient color filling can be achieved by adding a single color or multiple colors.
Shadow Size	Set the shadow background size of the line fill chart.
Shadow Horizontal Offset	Set the offset distance of the shadow in the horizontal direction.
Shadow Vertical Offset	Set the offset distance of the shadow in the vertical direction.
Opacity	Set the opacity of the shadow, the opacity value ranges from 0 to 1.
Shadow Color	Set the shadow color value.

Stacking

Stacking refers to the display method of superimposing multiple chart values together to form a new chart. Stacking is often used in two ways: Bar Chart Stacking and Line Chart Area Stacking. Compared with bar chart stacking, line chart area stacking is more suitable for use in scenarios with a large number of groups. It should be noted that line chart area stacking is not suitable for datasets with negative values.

Among them, line chart area stacking refers to drawing multiple datasets as vertically stacked areas. The stacked area chart is the same as the basic area chart, the only difference is that the starting point of each dataset on the chart is different, the starting point is based on the previous dataset. It is used to display the trend line of the size of each value over time or category, showing the relationship between parts and the whole. For example, when we count the GDP growth situation of various provinces in the country from 1980 to 2022, we can stack the GDP growth curves of various provinces through area stacking. In this way, we can not only see the growth situation of each province, but also the overall area after stacking can intuitively reflect the national GDP growth rate.

Setting Item	Description
Stacking Identifier	You can set the stacking identifier for each chart separately, and the system will stack the chart shapes with the same identifier together.
Stacking Strategy	According to the positive and negative of the chart values, different value strategies for stacking can be set.

Events

Setting Item	Description
Unclickable	After opening, all label data in the chart cannot be clicked; after closing, you can set the corresponding data click interaction event.
Call Automation on Click	You can select the corresponding automation to implement related data label click interaction events, such as opening the corresponding data form details or opening other web links after clicking.
Call Automation on Double Click	The function is the same as click call, but the interaction is triggered by double click instead of single click. You can set click and double click events at the same time.

Polar Coordinate Supplement

Polar coordinates simply refer to a coordinate system that describes positions using angles and lengths, which is significantly different from the display effects of line charts and bar charts in the Cartesian coordinate system. Generally, polar coordinates can be used in three types of charts: bar charts, line charts, and scatter charts.

When using polar coordinates, you need to first understand the following content: The polar coordinate system generally has two coordinate axes, called Polar Radius and Polar Angle respectively, which correspond to the radial (i.e., radius) axis and angle (i.e., arc) axis of the polar coordinate. At the same time, there are four types of coordinate axis measurement types to choose from, namely Value Axis, Category Axis, Time Axis, and Logarithmic Axis. Choosing different types of coordinate axes will result in different data scales displayed in the chart. The usage scenarios of the four coordinate axes are as follows:

Setting Item	Description
Value Axis	'value': Value axis, suitable for continuous data, representing the size of the value through the length of the radius.
Category Axis	'category': Category axis, suitable for discrete category data, representing each category value through a fixed radius length.
Time Axis	'time': Time axis, suitable for continuous time series data. Compared with the value axis, the time axis has time formatting, and the radius reflects the order change of time points.
Logarithmic Axis	'log': Logarithmic axis, suitable for logarithmic data, often used in line charts to present double value axes.

Here we take the line chart as an example to make a simple polar coordinate line chart example of the monthly order quantity of XXX company in 2018. The steps are as follows:

1. Create an instrument card, add a new data source in the Data Source menu, filter the data for 2018, and sum the monthly order quantity by grouping by month through aggregate query (select whether aggregate processing is needed according to the actual situation);
2. Add a line chart in the Chart menu, select Polar Coordinate System for the coordinate system type in data settings;
3. Select the aggregated order quantity for the Radius Field, and select the month for the Angle Field;
4. In the Polar Coordinate menu, you can modify parameters such as axis and dividing line size and color to optimize the display details of the chart. It should be noted that the polar coordinate generally defaults to the radial axis as the value axis and the angle axis as the category axis. You can flexibly adjust the axis type configuration according to different business scenarios;
5. Turn on the display floating prompt button in the Floating Prompt menu;
6. Hide the original horizontal and vertical coordinate axes in the X-axis and Y-axis menus to complete the final polar coordinate line chart configuration.