Line chart

Chart style

A line chart maps one value per category. By configuring multiple data series, you can display changes across different datasets within the same category, combining lines and areas to visualize multi-dimensional data trends.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of a configuration item to locate it. Fuzzy match is supported. For more information, see Search configuration items.

• Size: the width and height of the widget, in pixels.

• Positioning: the x-axis and y-axis coordinates of the component, in pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

• Rotate: the rotation angle of the widget around its center, in degrees.

  • Enter the degrees in the Rotation Angle spin box, or click the plus sign (+) or minus sign (-) to adjust the value.

  • Click the icon to flip the widget style.

  • Click the icon to flip the widget style.

• Opacity: valid values: 0 to 1. A value of 0 hides the widget. A value of 1 fully displays the widget. Default value: 1.

• Graphics

  Parameter	Description
  Chart Margins	Click the icon to toggle chart margins. When enabled, you can configure the distance between the line chart area and the widget boundaries. Default unit: px.
  Display form	The display form of the line chart. Valid values: Polyline, Curve, and Ladder.
  Polyline type	The type of the polyline. Valid values: Solid, Dashed, and Dotted.
  Line thickness	The thickness of the polyline, in pixels.
  Line Color	For more information about the colors of polylines, see Color mapper instructions.
  Color Synchronization	Specifies whether the point color matches the line color. Click the icon to toggle color synchronization.
  Opacity	The opacity of the polyline. The larger the value, the more opaque the polyline.
  Marking symbol	The marker symbol style of a data point in a line chart, including the shape and size of the marker symbol. Click the icon to show or hide the marker symbol.
  Mark Stroke	The stroke style of a data point in a line chart, including the line type, thickness, and color of the stroke. Click the icon to show or hide the stroke style.
  Fixed Series Order	The classification presentation order may be specified according to the order of the colorField fields. Click the or icon on the right to add or delete a series. Click the or icon to configure the arrangement style of multiple series. Click the icon to copy the selected series configurations and add a series with the same configurations.
  Line Label	The label style of the data point on the polyline. Click the icon to show or hide the data point label. Label Field: The content of the label field must match the content of the field in the data panel. By default, the content of the y field is returned. Pre-Suffix: the prefix and suffix of the column tag. Value Format: the display format of the tag value. Valid values: Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 11%(percentage), 11.1%(percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more data display formats, see Data display format description. This parameter is displayed only when y is selected for the Label field. Relative Offset: the offset of the data point label in the vertical and horizontal directions, in pixels. Rotation Angle: the rotation angle of the label. Unit: °. Layout optimization: automatically optimizes masked text and border text. Text Style: the text style of the data point label, including the font style, weight, font size, and color of the text. Text Stroke: the text stroke style of the data point label, including the thickness and color of the stroke line.

• Coordinates: the x-axis and Y axes of a widget.

  • X-axis

    • x-axis Display: toggles the visibility of the x-axis style in the widget.

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

      Parameter	Description
      Numerical Type	Supports numeric data such as integers and floating-point numbers.
      Category Type	Supports category data such as characters and strings.
      Time Type	Time-type data requires a configured data format.

    • Display Range: the display range of the minimum and maximum values of the x-axis data. This parameter is available only when Data Type is set to Numeric.

      Parameter	Description
      Minimum Runtime Duration	The minimum value of the x-axis. You can set this parameter to Minimum Value.
      Maximum Runtime Duration	The maximum value of the x-axis. You can set this parameter to Maximum Value.

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

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

      Parameter	Description
      Title Display	The text content of the axis title display.
      Display mode	The display mode of the axis title, including the angle value of the title and the offset value of the title.
      Text Style	The font style, text weight, font size, and color of the axis title text.

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

      Parameter	Description
      Display Format	x-axis the style of the label value display format. You can select Default, 11 (integer), 11.1 (floating point), 11.11 (floating point), 11%(percentage), 11.1%(percentage), 1,111 (thousands separator), and 1,111.1 (thousands separator). For more data display formats, see Data display format description. You can configure this parameter only when you set the x-axis Data Type parameter to Numerical.
      End Spacing	The distance between the x-axis label and the two ends of the axis, in %.
      Label Display	The display style of the label, including the number of axis labels, the prefix and suffix of the label, the angle value of the label, the offset, and the alignment of the label.
      Text Style	The font style, text weight, font size, and color of the axis label text.

    • Tick mark: the x-axis tick mark style, including the length, thickness, and color. Click the icon to show or hide x-axis tick marks.

    • Gridlines: the x-axis gridline style, including line style, thickness, color, length, and spacing. Click the icon to show or hide the x-axis gridlines.

  • Y-axis

    • Y-Axis Display: toggles the visibility of the Y-axis in the widget.

    • Data Type: the data type of the y-axis. Valid values: Number, Category, and Time.

    • Display Range: the display range of the minimum and maximum values of the Y-axis. This parameter is available only when Numerical is selected for Data Type.

      Parameter	Description
      Minimum Runtime Duration	The minimum value of the y-axis. You can specify a custom value. You can also select Minimum Value to obtain the minimum value of the data.
      Maximum Runtime Duration	The maximum value of the y-axis. You can specify a custom value. You can also select Maximum Data Value to obtain the maximum value in the data.

    • Axis: the Y-axis line style, including the shape, thickness, and color. Click the icon to show or hide the Y-axis line.

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

      Parameter	Description
      Title Display	The text content of the axis title display.
      Display mode	The display mode of the axis title, including the angle value of the title and the offset value of the title.
      Text Style	The font style, text weight, font size, and color of the axis title text.

    • Axis Label: the Y-axis label style. Click the icon to show or hide the Y-axis label.

      Parameter	Description
      Display Format	The display format of the Y-axis label value. You can select Default, 11 (integer), 11.1 (floating-point), 11.11 (floating-point), 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 parameter is available only when Y-Axis Data Type is set to Numerical.
      End Spacing	The distance between the two ends of the Y-axis label from the axis, in %.
      Label Display	The display style of the label, including the number of axis labels, the prefix and suffix of the label, the angle value of the label, the offset, and the alignment of the label.
      Text Style	The font style, text weight, font size, and color of the axis label text.

    • Tick mark: the Y-axis tick mark style, including the length, thickness, and color. Click the icon to show or hide the tick marks.

    • Gridlines: the Y-axis gridline style, including line style, weight, color, length, and spacing. Click the icon to show or hide the Y-axis gridlines.

• Animation: the animation effect of the line chart.

  • Animation: the animation style of the chart. Click the icon to enable or disable the animation.

    • Animation Effect: the animation effect type. Valid values: Zoom, Move, Horizontal Growth, and Vertical Growth.

    • Animation Duration: the duration of the animation effect, in ms.

  • Sweep Animation: the sweep animation style of the chart. Click the icon to enable or disable the sweep animation.

    Important

    When the sweep animation is enabled, interactive features such as Selected become invalid.

    • Highlight Style: the highlight height and intensity of the sweep animation.

    • Dynamic Effect: the animation duration and gap of the sweep animation, in ms.

• Interactive: the interactive effects of the line chart widget.

  • Carousel: After you enable the carousel feature, the dialog box settings are applied and the dialog box is no longer triggered by interactions. Click the icon to display or hide the carousel effect.

  • dialog box: the style of the dialog box that appears when you move the pointer over or click a polyline on the preview or publish page. You can click the icon to turn the dialog box on or off.

    Parameter	Description
    Mode	dialog box patterns, optional, include concise and universal.
    Trigger	The method by which the dialog box is triggered. You can select Hover or Click.
    Display Position	The position style of the dialog box display. The value is optional, including top, bottom, left, and right.
    Title Spacing	The spacing between titles in the dialog box. Unit: px.
    Title Text	The style of the title text in the dialog box, including the font style, text weight, font size, and color.
    Content Display	Click the or icon on the right to add or delete a dialog box content series. Click the or icon to configure the arrangement style of multiple dialog box content display series. Click the icon to copy the current dialog box content display series configuration and add a dialog box content display series with the same configuration. Field Name: the name of the field in the dialog box content. The name must match the field in the data panel. Display Name: the display name of the dialog box content. Suffix: the suffix of the dialog box content.
    Content Spacing	The spacing between the text of the dialog box content. Unit: px.
    Content Text	The style of the content text in the dialog box, including the font style, text weight, font size, and color.
    Pop-up background	The dialog box background style. Background Margin: the horizontal and vertical margins of the dialog box background. Background Color: The background color of the dialog box. Border Style: the border style of the dialog box, including the line type, rounded corner size, line width, and border color.
    Marker Point	Click the icon to turn dialog box marker points on or off.
    Axis indicator	The style of the dialog box axis indicator, including the axis indicator type, thickness value, and axis indicator color. Click the icon to turn the axis indicator on or off. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

  • Selected: the selected state. You can click the icon to enable or disable the selected state.

    Important

    When the Sweep Animation feature is enabled, the selected feature is disabled.

    Parameter	Description
    Trigger	The trigger mode of the selected column. This parameter is optional, including Hover and Click.
    Select Method	The method by which you want to select a column. You can select one or more columns.
    Polyline type	Set the line type, thickness, and color of the polyline. Click the icon to turn the polyline style on or off.
    Marking size	Sets the tag size.
    Mark Stroke	Set the stroke line type, line thickness, and line color.

  • Throat Axis: when a line chart contains too much data, you can use the thumbnail axis to navigate through the data. Click the icon to enable or disable the thumbnail axis.

    Important

    When Sweep Animation is enabled, the thumbnail axis function becomes invalid.

    Parameter	Description
    Default Range	The range of data displayed on the thumbnail axis. The range can be from 0 to 1.
    Rail Style	The style of the thumbnail axis slide, including the height value of the slide, the foreground color of the slide, and the background color.
    Text Style	The style of the text on the thumbnail axis, including the font content, text weight, font size, and text color. This option is displayed only if the thumbnail axis style is turned on.
    Background Trend	Displays the background trend style of the line chart on the thumbnail axis, including the type of background trend line, line thickness, and line color. Generally, the trend of line data in the graph is consistent and can be displayed only when the line chart has only one data series.
    Handle Style	The handle style at both ends of the thumbnail shaft, including the handle's size width and height values, the handle's background default and high color, and the handle's edge corner values and edge color.

• Legend: the legend style of the line chart.

  Parameter	Description
  Legend Switch	When enabled, you can configure the legend style. When disabled, the legend is hidden.
  Legend Position	The position of the legend relative to the widget. Valid values: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left Top, Left Center, Left Bottom, Right Top, Right Center, and Right Bottom.
  Text Style	The font style, text weight, font size, and color of the legend text.
  Category Legend	The style of the sub-type legend. Marker Size: the size of the legend marker. Legend Spacing: the horizontal and vertical distance between the legends of different categories. Maximum Width: the maximum width of the legend. Unit: pixels. Paging Allowed: when enabled, legends can be paged. You can configure the page number style and arrow style when the number of legends exceeds the display area. When disabled, all legends are displayed on a single page. Style: the style of the page number, including the font, weight, font size, and color of the page number. Arrow Style: the size, default color, and disabled color of the arrows in the page-turning style.

• Dimension: the dimension style settings.

  • Auxiliary Line: Click the or icon on the right to add or delete an auxiliary line series. Click the or icon to configure the arrangement style of multiple guide line series. Click the icon to copy the currently selected auxiliary line series configuration and add an auxiliary line series with the same configuration.

    • Type: the type of the auxiliary line. Valid values: horizontal line, vertical line, and slash line.

    • Data Value: the data values of auxiliary lines, including the average line, median line, maximum line, and minimum line.

    • Linetype Style: the linetype style of the auxiliary line, including the linetype, thickness, length, spacing, and color of the auxiliary line.

    • Text: specifies the content style of the guide line, including the text, data display switch, rotation angle, horizontal and vertical offset, and alignment position.

    • Text Background: specifies the background of the guide line, including the color of the background and the radius of the rounded corner.

    • Text Style: the text style of the guide line.

  • Auxiliary Frame: Click the or icon to add or delete an auxiliary frame series. Click the or icon to configure the arrangement style of multiple auxiliary frame series. Click the icon to copy the auxiliary frame series configuration and add an auxiliary frame series with the same configuration.

    • End Point Position: Set the start time horizontal /y-axis of the auxiliary frame and the horizontal /y-axis of the end point.

    • Background Fill: Set the background color of the auxiliary frame.

    • Line Style: the line style of the auxiliary frame, including the line type, weight, length, spacing, and color of the auxiliary frame.

    • Text: Set the content style of the auxiliary frame, including the text, horizontal and vertical offset, rotation angle, and display position.

    • Text Background: Set the background of the auxiliary frame, including the color of the background and the radius of the rounded corners.

    • Text Style: the text style of the auxiliary frame.

  • Polyline: Click the or icon on the right to add or delete a polyline series. Click the or icon to configure the arrangement style of multiple polyline series. Click the icon to copy the current polyline series configuration and add a polyline series with the same configuration. For more information about how to configure polylines in each series, see Use conditional trees.

    • Polyline Type: the type of the line under the current polyline. You can select Solid Line, Dashed Line, or Dotted Line. You can click the icon to control the display of the polyline type.

    • Line thickness: the thickness of the polyline under the current polyline. Unit: pixels. You can click the icon to control the visibility of the line thickness.

    • Line Color: the color of the line under the current line. For more information, see color picker description. You can click the icon to control the color of the polyline.

    • Opacity: the opacity of the current polyline. A larger value indicates more opacity. You can click the icon to control the opacity.

    • Marker Color: the color of the line under the current line. For more information, see color picker description. You can click the icon to control the color of the marker.

    • Marker Symbol: the style of the marker symbol of the data point in the line chart, including the shape and size of the marker symbol. You can click the icon to control whether the marker symbol is used.

    • Marker Stroke: the marker stroke style of the data point in the line chart, including the line type, line thickness, and color. You can click the icon to control the visualization of the data point marker stroke style.

    • Text Dimension: the text dimension style of the line under the current line.

      • Text Content: specifies the text annotation content.

      • Offset: the horizontal and vertical offsets of the text annotation. Unit: pixels.

      • Orientation: the orientation of the text annotation relative to the text annotation point, including top, right, bottom, and left.

      • Text Background: specifies the background of the text annotation, including the color of the background and the radius of the rounded corners.

      • Text Style: the text style of the text content.

      • Text Line: specifies the line style of the text annotation, including the line type, color, weight, and length.

Data Sources panel

Advanced Panel

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the line chart interface request is completed	This event is triggered after a data interface request is responded to and processed by a filter. The processed JSON data is included. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel.
     When Data Item Is Selected (Dot)	The event that is raised when a line of a line chart is clicked, and the data item corresponding to the line is also raised.
     When data item is selected (line)	The event that is raised when a line of a line chart is clicked, and the data item corresponding to the line is also raised.
     When the legend is clicked	The event that is raised when the legend of a line chart is clicked, and the data item corresponding to the line is also raised.
     When the dialog box is displayed	The event that is raised when a dialog box is displayed, along with the corresponding data item. Sample code: { "items": [], // The data. "title": "", "x": 1, // Default value: 1 "y": 1 // Default value: 1 }
     When a line is clicked	The event that is raised when a polyline is clicked, along with the data item corresponding to the polyline. Sample code: { "mappingData": [] // Mapping data }

   • Action

     Action	Description
     Import a line chart	After widget data is processed into the required drawing format, the widget is imported for redrawing without requesting server data again. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel.
     Request Line Chart	Requests server data again, using data from an upstream data processing node or layer node as parameters. For example, if the API data source for a line chart is https://api.test and the data passed to the Request Line Chart API action is { id: '1'}, the final request URL is https://api.test?id=1.
     Highlight	Highlight the element corresponding to the data item. For more information, see Data example. { data: { x: 'Shanghai' // You can list multiple highlight conditions, similar to filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     Unhighlight	Removes the highlight from all elements. No parameters are required.
     Move	Move a widget to a specified location. For more information, see the data example. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The animation delay. Unit: milliseconds. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Hide	Toggles the visibility of a widget. No parameters are required.
     Display	Display the widget. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hide the component. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data. Then, modify the style field for the data processing node in Blueprint Editor.