Basic line chart (versions earlier than v3.0)

Configuration

• 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.
• Chart size: The width and height of the component in px. You can click to lock the aspect ratio for proportional scaling. Click the icon again to unlock it.
• Chart position: The x-coordinate and y-coordinate of the component in px. The x-coordinate is the distance from the upper-left corner of the component to the left border of the canvas. The y-coordinate is the distance from the upper-left corner of the component to the top border of the canvas.
• Rotation angle: Rotates the component around its center point, in degrees (°).
  • Manually enter an angle value to control the rotation angle of the component.
  • Drag the black dot inside the icon to control the rotation angle of the component.
  • Click the icon to flip the component horizontally.
  • Click the icon to flip the component vertically.
• Opacity: The value must be in the range of [0, 1]. A value of 0 means the component is completely transparent. A value of 1 means the component is fully opaque. The default value is 1.

• Global settings

  • Font: The font family for all text in the chart. The default is Microsoft YaHei.

  • Margin: The distance between the chart and the component's borders, in px.

  • Empty data: When enabled, the line connects points across null or empty data values. When disabled, the line breaks at these points.

    Figure 1. Empty Data enabled

    Figure 2. Empty Data disabled

  • Load limit: The maximum number of data records to load for layout, rendering, and calculation. This limit ensures optimal performance.

• X-axis: The style of the chart's x-axis. Click the icon to show or hide the x-axis.

  • Text

    • Color: The color of the x-axis text.

    • Font Size: The font size of the x-axis text. The value must be in the range of 10 to 100.

    • Font Weight: The font weight of the x-axis text.

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

    Note

    If the x field values in your data do not match the configured data format, the chart may not render correctly.

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

      • Numeric: Supports numerical data types such as integers and floating-point numbers.

      • Category: Supports categorical data types such as characters and strings.

      • Time: Supports time-based data. You must configure the data format.

    • Data format: The display format of the data. This option is available only when the data type is Time. Configure the format based on the %Y/%m/%d %H:%M:%S standard.

    • Display format: The desired display format for the data. For time values, use formats like %m/%d %H:%M:%S. For integers, use d. For floating-point numbers, use .1f.

    • Boundary gap: When enabled, adds a gap at both ends of the x-axis.

    • Boundary gap size: The size of the boundary gap, with a value range of 0 to 1. This option is available only when Boundary gap is enabled.

    • Maximum: The maximum value for the x-axis. The default is auto, which calculates the value based on the data. You can also enter a custom value.

    • Minimum: The minimum value for the x-axis. The default is auto, which calculates the value based on the data. You can also enter a custom value.

    • Offset: The vertical offset of the x-axis value labels.

    • Unit: The unit for the x-axis.

    • Quantity: The number of labels on the x-axis.

    • Angle: The angle of the x-axis labels. Options: Horizontal, Slanted, and Vertical.

    • Axis line: The color and visibility of the axis line.

    • Grid lines: The color and visibility of the grid lines.

• Y-axis

  Configuration options are similar to those for the x-axis. See the x-axis section for details.

• Legend: The style of the chart legend. Click the icon to show or hide the legend.

  • Text

    • Font Size: The font size of the legend text.

    • Color: The color of the legend text.

    • Font Weight: The font weight of the legend text.

  • Layout: The layout of the legend items.

    • Spacing

      • Horizontal spacing: The horizontal space between legend items. This option applies only when there are multiple data series.

      • Vertical spacing: The vertical spacing between the legend and the top and bottom borders of the component.

    • Position: The position of the legend relative to the component's origin. Multiple options are available.

• Tooltip: Configures the tooltip that appears when you hover over or click a data point.

  Figure 3. Tooltip panel

  Figure 4. Tooltip example

  • Trigger type: The element that triggers the tooltip. Options are Data Item and Axis.

  • Trigger action: The action that triggers the tooltip. Options include Hover and Click.

  • Hide delay: The delay (in milliseconds) before the tooltip hides after the trigger condition is no longer met.

  • Background style: The style of the tooltip container.

    • Background color: The background color of the tooltip.

    • Custom background size: The width and height of the tooltip in px.

    • Padding: The internal padding of the tooltip in px.

    • Horizontal offset: The horizontal offset of the tooltip relative to the pointer, in px.

    • Vertical offset: The vertical offset of the tooltip relative to the pointer, in px.

    • Border color: The border color of the tooltip.

    • Border width: The border width of the tooltip in px.

  • Text style: The style of the text within the tooltip.

    • Color: The color of the tooltip text.

    • Font: The font family of the tooltip text.

    • Font Size: The font size of the tooltip text.

    • Font Weight: The font weight of the tooltip text.

  • Axis pointer: The style of the axis pointer displayed when the trigger type of the tooltip is set to axis and a trigger action is performed.

    • Type: The type of axis pointer. Currently, only Line Pointer is supported.

    • Pointer Line Style: The color, width, and type of the indicator line. Type options include Solid, Dashed, and Dotted.

• Data series: Click the icon to add or the icon to delete a data series.

  Note

  This configuration option is an array and can hold multiple data series. The chart applies these configurations cyclically to your data. To apply a specific style to a particular data set, you must sort your data accordingly.

  • Series name: A custom name for the data series. If left empty, the component uses the value from the s data field. If you provide a name, ensure your data is sorted correctly to match the series configuration.

  • Line: The style of the line for this series.

    • Color: The color of the line.

    • Style: The style of the line. Options: Solid and Dashed.

    • Width: The width of the line.

    • Smooth: When enabled, the line is rendered as a smooth curve instead of with straight segments.

  • Points: The style of the points on the line for this series.

    • Color: The color of the points.

    • Radius: The radius of the points in px.

  • Area: The style of the area under the line for this series.

    Color: The color of the area. Both solid and gradient fills are supported.

  • Labels: The style of the labels on the line for this series.

    • Font Size: The font size of the label text.

    • Color: The color of the label text.

    • Font Weight: The font weight of the label text.

• Animation: The animation effects for the chart. Click the icon to enable or disable animations.

  • Initial animation duration: The duration (in ms) of the initial animation when the component first loads.

  • Easing: The easing effect for the animation. The system provides a variety of common easing effects to choose from.

  • Update animation duration: The duration of the animation when the component's data is updated, in ms.

  • Start from previous position: When enabled, data update animations start from the previous data's position. When disabled, they start from the initial position.

Data

[
  {
    "x": "2010/01/01 00:00:00",
    "y": 375,
    "s": "1"
  },
  {
    "x": "2010/01/01 00:00:00",
    "y": 180,
    "s": "2"
  },
  {
    "x": "2010/02/01 00:00:00",
    "y": 200,
    "s": "1"
  },
  {
    "x": "2010/02/01 00:00:00",
    "y": 100,
    "s": "2"
  },
  {
    "x": "2010/03/01 00:00:00",
    "y": 25,
    "s": "1"
  },
  {
    "x": "2010/03/01 00:00:00",
    "y": 125,
    "s": "2"
  },
  {
    "x": "2010/04/01 00:00:00",
    "y": 190,
    "s": "1"
  },
  {
    "x": "2010/04/01 00:00:00",
    "y": 110,
    "s": "2"
  },
  {
    "x": "2010/05/01 00:00:00",
    "y": 90,
    "s": "1"
  },
  {
    "x": "2010/05/01 00:00:00",
    "y": 60,
    "s": "2"
  }
]

Interaction

Select Enable to activate the component's interaction features. When enabled, clicking a data point triggers a data request and returns a callback value, which can be used to dynamically load new data. By default, the x, y, and s values from the data are returned. For specific configurations, see Configure Component Callback IDs.

Blueprint Editor interaction configuration

1. In the canvas editor, right-click the component and select Export to Blueprint Editor.

2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the Basic line chart component in the Added Nodes panel. The component's configuration parameters appear on the canvas, as shown below.

   • Events

     Event	Description
     When basic line chart API request is complete	Triggered after a data API request completes and the data has been processed by any data filters. The event returns the processed data in JSON format. For a data example, see Data.
     When a data item is clicked	Triggered when a user clicks a data point on the chart. The event returns the data for the clicked point.

   • Actions

     Actions	Description
     Request basic line chart API	Requests data from the server again. Data from upstream nodes is passed as parameters. For example, if the basic line chart's API data source is set to http://api.test and the data passed to the Request basic line chart API action is { id: '1'}, the final request URL will be http://api.test?id=1.
     Import data for basic line chart	Imports data that is already formatted for the component and redraws the chart. This does not re-request data from the server. For a data example, see Data.
     Highlight	Highlights the element corresponding to a data item. The following code is a parameter example. { data: { x: '2010/01/01' // You can list multiple conditions, similar to a filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     Clear highlight	Removes the highlight from the element corresponding to a data item. The following code is a parameter example. { data: { x: '2010/01/01' }, options: { mode: 'single' // If 'single', only one highlight is cleared when multiple data items match. If 'multiple', all matching highlights are cleared. } }
     Update component configuration	Dynamically updates the component's style configuration. To use this, first click Copy Configuration to Clipboard in the component's Configuration panel to get the component configuration data. Then, use a data processing node in the Blueprint Editor to modify the configuration values.
     Show	Shows the component. No parameters are required.
     Hide	Hides the component. No parameters are required.
     Toggle visibility	Toggles the visibility of the component. { // true to show, false to hide. "status": true, // Animation for showing. "animationIn": { // Animation type, for example, fade. If empty, no animation is applied. "animationType": "fade", // Animation duration in ms. "animationDuration": 1000, // Easing function. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" }, // Animation for hiding. "animationOut": { // Animation type, for example, fade. If empty, no animation is applied. "animationType": "fade", // Animation duration in ms. "animationDuration": 1000, // Easing function. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" } }
     Move	Moves the component to a specified position. { // Move type. 'to' for absolute positioning, 'by' for relative positioning. Default: 'to'. "positionType": "to", // Target position: x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration in ms. "animationDuration": 1000, // Easing curve. Options: linear, easeInOutQuad, easeInOutExpo. "animationEasing": "linear" } }