Line chart

Chart style

In a line chart, each category corresponds to a single value. You can configure multiple data series to show how different data changes within the same category. The chart combines lines and areas to display multi-dimensional change trends.

Configuration panel

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Chart

  Parameter	Description
  Chart Margin	Click the icon to show or hide the chart margin. When enabled, you can configure the distance between the line chart area and the top, bottom, left, and right borders of the widget. The default unit is px.
  Display Mode	Sets the display style of the line chart. Options include Line, Curve, and Step.
  Line Type	The line type can be Solid Line, Dashed Line, or Dotted Line.
  Line Width	The width of the line in px.
  Line Color	The color of the line. For more information, see Use the color mapper to configure mapping colors for different series.
  Color Sync	Specifies whether the point color is the same as the line color. You can select Sync or Do Not Sync.
  Opacity	The opacity of the line. The larger the value, the more opaque the line.
  Mark Color	The color style of markers for data points in the line chart. See Color Mapper Instructions to configure mapped marker colors for different line series. This option is displayed when Color Sync is set to Do Not Sync.
  Mark Symbol	The style of the data point marks in the line chart, including the shape and size. Click the icon to show or hide the data point mark style.
  Mark Outline	The outline style of the data point marks in the line chart, including the line type, width, and color. Click the icon to show or hide the data point mark outline style.
  Fixed Series Order	Sets the order of the colorField field to specify the display order of categories. Click the or icon to add or delete a series. Click the or icon to arrange multiple series. Click the icon to copy the current series configuration and add a new series with the same configuration. Series Name: The name of the fixed series.
  Line Label	The style of the data point labels on the line. Click the icon to show or hide the data point label configurations. Label Field: The content of the label must correspond to the content of a field in the data panel. By default, the content of the y field is used. Prefix/Suffix: Sets the prefix and suffix for the data point labels. Numeric Format: Sets the numeric format for the labels. You can select from Default, 11 (Integer), 11.1 (Floating-point Number), 11.11 (Floating-point Number), 11% (Percentage), 11.1% (Percentage), 1,111 (Thousands Separator), and 1,111.1 (Thousands Separator). For more information about data display formats, see Data display format description. This setting is available only when y is selected for the label field. Relative Offset: The vertical and horizontal offset of the data point label relative to the data point, in px. Rotation Angle: The rotation angle of the label in degrees (°). Layout Optimization: Automatically optimizes overlapped and out-of-bounds text. Text Style: The text style of the data point labels, including font, weight, size, and color. Text Outline: The text outline style of the data point labels, including the outline width and color.

• Axes: The widget axes include the X-axis and the Y-axis.

  • X-axis

    • Show X-axis: Turn on the switch to show the x-axis. Turn off the switch to hide the x-axis.

    • Data Type: The data type of the x-axis.

      Parameter	Description
      Numeric	Supports numeric data such as integers and floating-point numbers.
      Categorical	Supports categorical data such as characters and strings.
      Time	Time-type data. You must configure the data format.

    • Display Range: The display range of the minimum and maximum data values on the x-axis. This option can be configured only when the Data Type configuration item is set to Numeric.

      Parameter	Description
      Minimum	The minimum value of the x-axis. You can enter a custom value or select Data Minimum to use the minimum value from the data.
      Maximum	Specifies the maximum value for the x-axis. You can enter a custom value or select Data Maximum to use the maximum value from the data.

    • Axis Line: The style of the x-axis line, including the line shape, width, and color. Click the icon to show or hide the x-axis line style.

    • Axis Title: The style of the x-axis title. Click the icon to show or hide the x-axis title.

      Parameter	Description
      Title Display	The text content of the x-axis title.
      Display Method	The display method of the x-axis title, including the angle and offset of the title.
      Text Style	The font, weight, size, and color of the x-axis title text.

    • Tick Line: The style of the x-axis tick lines, including the length, width, and color. Click the icon to show or hide the x-axis tick line style.

    • Axis Label: The style of the x-axis labels. Click the icon to show or hide the x-axis labels.

      Parameter	Description
      Display Format	The display format for the values of x-axis labels. You can select Default, 11 (Integer), 11.1 (Floating-point Number), 11.11 (Floating-point Number), 11% (Percentage), 11.1% (Percentage), 1,111 (Thousands Separator), and 1,111.1 (Thousands Separator). For more information about data display formats, see Data display formats. This option is available only when the Data Type of the x-axis is set to Numeric.
      Padding on Both Ends	The distance between the x-axis labels and the two ends of the axis, in %.
      Label Display	The display style of the labels, including the number of x-axis labels, prefix and suffix content, angle, offset, and alignment.
      Text Style	The font, weight, size, and color of the x-axis label text.

    • Gridline: The style of the x-axis gridlines, including the line type, width, color, length, and spacing. Click the icon to show or hide the x-axis gridlines.

  • Y-axis

    • Show Y-axis: Turn on the switch to show the y-axis. Turn off the switch to hide the y-axis.

    • Data Type: The data type for the y-axis, which can be Numerical, Categorical, or Time.

    • Display Range: The minimum and maximum values to display on the y-axis. This setting is configurable only when the Data Type is set to Numeric.

      Parameter	Description
      Minimum	The minimum value of the y-axis. You can enter a custom value or select Data Minimum to use the minimum value from the data.
      Maximum	The maximum value for the y-axis. You can enter a custom value or select Data Maximum to use the maximum value from the data.

    • Axis Line: The style of the y-axis line, including the line shape, width, and color. Click the icon to show or hide the y-axis line style.

    • Axis Title: The style of the y-axis title. Click the icon to show or hide the y-axis title.

      Parameter	Description
      Title Display	The text content of the y-axis title.
      Display Method	The display method of the y-axis title, including the angle and offset of the title.
      Text Style	The font, weight, size, and color of the y-axis title text.

    • Tick Line: The style of the y-axis tick lines, including the length, width, and color. Click the icon to show or hide the y-axis tick line style.

    • Axis Label: The style of the y-axis labels. Click the icon to show or hide the y-axis labels.

      Parameter	Description
      Display Format	The display format for the y-axis label values. You can select Default, 11 (integer), 11.1 (floating-point Number), 11.11 (floating-point Number), 11% (percentage), 11.1% (percentage), 1,111 (thousands Separator), and 1,111.1 (thousands Separator). For more information about data display formats, see Data display formats. This setting is configurable only when Y-axis Data Type is set to Numeric.
      Padding on Both Ends	The distance between the y-axis labels and the two ends of the axis, in %.
      Label Display	The display style of the labels, including the number of y-axis labels, prefix and suffix content, angle, offset, and alignment.
      Text Style	The font, weight, size, and color of the y-axis label text.

    • Gridline: The style of the y-axis gridlines, including the line type, width, color, length, and spacing. Click the icon to show or hide the y-axis gridlines.

• Animation: The animation effect style of the line chart.

  Parameter	Description
  Enable Animation	Turn on the switch to configure animation effects for the line chart.
  Animation Effect	The system provides several common animation effects, such as Fade, Scale In, and Slide In. This option can be configured only after the animation switch is turned on.
  Animation Duration	The duration of the animation effect in ms. This parameter is configurable only after you enable animation.

• Interaction: The interaction effect style of the line chart widget.

  • Tooltip: The style of the tooltip that appears when you hover over or click a line in preview or published mode. Click the icon to enable or disable the tooltip.

    Parameter	Description
    Mode	The pattern of the prompt box is optional and includes Concise and General.
    Trigger Method	The method to trigger the tooltip, which is optional, includes Hover and Click.
    Display Position	The position of the tooltip. This is an optional setting that includes Top, Bottom, Left, and Right.
    Title Spacing	The spacing between titles in the tooltip, in px.
    Title Text	The text style of the tooltip title, including font, weight, size, and color.
    Content Display	Click the or icon to add or delete a content display series for the tooltip. Click the or icon to arrange multiple content display series. Click the icon to copy the current content display series configuration and add a new series with the same configuration. Field Name: The field name for the tooltip content. It must match a field in the data panel. Display Name: The display name for the tooltip content. Suffix: The suffix for the tooltip content.
    Content Spacing	The spacing between content text in the tooltip, in px.
    Content Text	The text style of the tooltip content, including font, weight, size, and color.
    Popup Background	The background style of the tooltip popup. Background Margin: The horizontal and vertical margins of the tooltip background. Background Color: The background color of the tooltip. Border Style: The style of the tooltip border, including the line type, border radius, line width, and border color.
    Axis Pointer	The style of the tooltip's axis pointer, including the pointer type, width, and color. Click the icon to enable or disable the axis pointer. Note When the line type is Dashed Line or Dotted Line, you can also configure the length of the dashes and the distance between each dash.

  • Selected State: The style for the selected state when the mouse selects an item. Click the icon to enable or disable the selected state style.

    Note

    This is available for Line and Step charts.

    Parameter	Description
    Trigger Method	The trigger method for a bar is optional and includes Hover and Click.
    Selection Method	The method for selecting bars, which is optional, includes Single Select and Multi-select.
    Line Type	Sets the line type, width, and color. Click the icon to enable or disable the line type style.
    Mark Size	Sets the mark size.
    Mark Outline	Sets the outline line type, width, and color.

  • Thumbnail Axis: The style of the thumbnail axis interaction, which can be set when the line chart has too much data. Click the icon to enable or disable the thumbnail axis interaction effect.

    Parameter	Description
    Default Range	The data range displayed by the thumbnail axis. The value ranges from 0 to 1.
    Slider Style	The style of the thumbnail axis slider, including the slider height, foreground color, and background color.
    Text Style	The style of the text on the thumbnail axis, including font, weight, size, and color. This option is displayed only when the thumbnail axis style is enabled.
    Background Trend	The style of the background trend of the line chart displayed on the thumbnail axis, including the trend line type, width, and color. It usually matches the data trend of the line in the chart. This is displayed only when the line chart has a single data series.
    Handle Style	The style of the handles at both ends of the thumbnail axis, including the handle width and height, default and highlighted background colors, border radius, and border color.

• Legend: The style of the line chart legend.

  Parameter	Description
  Enable Legend	Turn on the switch to configure the legend style. Turn off the switch to disable legend configuration.
  Legend Position	The position of the legend relative to the origin coordinates of the widget. You can select Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left Top, Left Center, Left Bottom, Right Top, Right Center, or Right Bottom.
  Text Style	The font style, weight, size, and color of the legend text.
  Chart Spacing	The horizontal and vertical spacing between the legend and the chart.
  Categorical Legend	The style of the categorical legend. Mark Size: The size of the legend marks. Legend Spacing: The horizontal and vertical distance between different categorical legend items. Maximum Width: Sets the maximum width of the legend in px. Enable Pagination: Turn on the switch to enable legend pagination. You can configure the page number and arrow styles for when the number of legend items is too large and requires pagination. Turn off the switch to display all legend items on one page without pagination. Maximum Rows: The maximum number of rows to display for the legend. If this number is exceeded, the legend will be paginated. Page Number Style: The style of the page numbers, including font, weight, size, and color. Arrow Style: The size, default color, and disabled color of the arrows in the pagination style.
  Continuous Legend	The style of the continuous legend. Slider Style Type: The type of the legend slider track, including Rectangle and Triangle. Length: The length of the legend slider track. Height: The height of the legend slider track. Background Color: The background color of the legend slider track. Slider Handle Style: The style of the slider handle on the legend's slider track. Minimum: The minimum value for the slider. You can enter a custom value or select Automatic to use the minimum value from the data. Maximum: The maximum value for the slider. You can enter a custom value or select Auto to use the maximum value from the data. Size: The size of the slider handle. Color: The color of the slider handle. Label Style: The style of the text labels on the legend. Alignment: The alignment of the legend text label relative to the slider track, including Align Top, Align Center, and Align Bottom. Spacing: The distance between the legend text labels and the slider track.

• Condition: Description of conditional styles.

  Conditional Style: Click the or icon to add or delete a conditional style. Click the or icon to arrange multiple conditional styles. Click the icon to copy the current conditional style configuration and add a new one with the same settings. For specific configurations, see Use the condition tree.

  Parameter	Description
  Line Type	The type of line for the current conditional style. You can select Solid Line, Dashed Line, or Dotted Line. You can click the icon to show or hide the line.
  Line Width	The line width for the current conditional style, in px. Click the icon to show or hide the line width.
  Line Color	The line color for the current conditional style. For more information, see Color picker to configure mapping colors for different series. Click the icon to show or hide the line color.
  Opacity	The line opacity for the current conditional style. The larger the value, the more opaque the line. Click the icon to show or hide the opacity.
  Mark Color	The mark symbol color for the current conditional style. For more information, see Color picker to configure mapping colors for the mark symbols of different series. Click the icon to show or hide this setting.
  Mark Symbol	The shape and size of the mark symbol for the current conditional style. Click the icon to show or hide the mark symbol.
  Mark Outline	The line type, width, and color of the mark outline for the current conditional style. Click the icon to show or hide the mark outline.
  Reference Line	The name, text style, and line style of the custom reference line for the current conditional style. Click the icon to show or hide the reference line.

Data panel (Default Mode)

Field configuration

Table 1. Parameters

Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Data panel (Analysis Mode)

For detailed instructions on the BI analysis data configuration panel, see Introduction to the data panel in BI analysis mode.

Field configuration

Interaction panel

Interaction description

Blueprint Editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the Line chart widget in the imported nodes bar. The configuration parameters for the line chart in the Blueprint Editor are shown on the canvas.

   • Events

     Event	Description
     When the line chart API request is successful	This event is triggered after a data API request is returned and processed by a filter, and emits the processed data in JSON format. For a specific data example, see the Data Response area on the Data tab of the settings panel to the right of the widget in the canvas editor.
     When the line chart API request fails	This event is thrown after the response from a failed data API request is returned and processed by a filter. A request may fail due to issues such as network problems or API errors. The event also throws the processed data in JSON format. For a specific data example, see the Data Response area on the Data tab in the settings panel to the right of the widget in the canvas editor.
     When a data item is selected (point)	An event that is returned when you click a point on the line chart. The data item corresponding to the line is also returned.
     When a data item is selected (line)	An event that is returned when you click a line on the line chart. The data item corresponding to the line is also returned.
     When a legend item is clicked	An event that is returned when you click a legend item of the line chart. The data item corresponding to the line is also returned.
     When the tooltip is displayed	An event that is returned when the tooltip is displayed. The corresponding data item is also returned. The following code provides a data sample. { "items": [], // Data "title": "", "x": 1, // Default value: 1 "y": 1 // Default value: 1 }
     When a line is clicked	An event that is returned when a line is clicked. The data item corresponding to the line is also returned. The following code provides a data sample. { "mappingData": [] // Mapping data }

   • Actions

     Action	Description
     Request Line Chart API	Re-requests server-side data. Data from upstream data processing nodes or layer nodes is used as parameters. For example, if the API data source for the line chart is configured as https://api.test and the data passed to the Request Line Chart API action is { id: '1'}, the final requested API is https://api.test?id=1.
     Import Line Chart API	The data is processed in the format required by the component and then imported to redraw the component. You do not need to request server-side data again. For a data example, see the Data Response area on the Data tab of the settings panel to the right of the component in the canvas editor.
     Highlight	Highlights the element corresponding to the data item. The following code provides a sample of reference data. return { "data": { "x": data.x, // Data item to highlight "colorField": data.colorField }, "style": { "fillStyle": "#f00" // Fill color } }
     Remove Highlight	Removes the highlight. No parameters are required.
     Update Widget Configuration	Dynamically updates the style configuration of the widget. First, click Copy Configuration to Clipboard in the widget's Configuration panel to get the widget configuration data. Then, change the field values for the corresponding styles in the data processing node on the Blueprint Editor configuration page as needed.
     Show	The following example shows the reference data for the display component. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the widget. The following code provides a sample of reference data. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle Visibility	Toggles the visibility of the widget. The following code provides a sample of reference data. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the widget to a specified position. The following code provides a sample of reference data. return{ // Movement method. Absolute positioning: to. Relative positioning: by. Default: to. "positionType": "to", // Specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation method. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation curve. Options: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }