Bullet chart

Chart style

The bullet chart uses a simple, linear format to display a large amount of information in a compact space. This format conveys information more effectively than circular charts. The chart uses colors to represent the data distribution across predefined performance ranges.

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 set the distance between the bullet chart area and the top, bottom, left, and right borders of the widget. The default unit is px.
  Chart Height	Sets the height of the bullet chart elements, including the Range value, Actual value, and Target value. The unit is px.
  Actual Value	The actual value of the bullet chart. Color: Click the or icon on the right to add or delete a color style series. Click the or icon to arrange multiple color style series. Click the icon to copy the current color style series and add a new one with the same configuration. Actual Value Label: Enable this option to set the label for the actual value. Disable it to hide the label. Relative Offset: The horizontal and vertical offset of the actual value label. The unit is px. Text Style: The text style of the label, including the font, weight, size, and color. Text Outline: The outline weight and color of the label text.
  Target Marker	Sets the target marker value of the bullet chart. Target Value Style: Sets the style of the target value line, including the line type, weight, and color. Target Value Label: Enable this option to set the label for the target value. Disable it to hide the label. Label Position: The position of the target label. Options: Left, Center, and Right. Relative Offset: The horizontal and vertical offset of the target value label. The unit is px. Text Style: The text style of the label, including the font, weight, size, and color. Text Outline: The outline weight and color of the label text.
  Range	Sets the range of the bullet chart. Range Value Color: Click the or icon on the right to add or delete a color style series. Click the or icon to arrange multiple color style series. Click the icon to copy the current color style series and add a new one with the same configuration. Range Value Label: Enable this option to set the label for the range value. Disable it to hide the label. Relative Offset: The horizontal and vertical offset of the range value label. The unit is px. Text Style: The text style of the label, including the font, weight, size, and color. Text Outline: The outline weight and color of the label text.

• Coordinates: A component's coordinate axes are the X-axis and the Y-axis.

  • X-axis

    • Show X-axis: Enable this option to show the x-axis. Disable it to hide the x-axis.

    • Display Range: The display range of the x-axis, including the minimum and maximum values.

      Parameter	Description
      Minimum	The minimum value of the x-axis. You can enter a custom value, or select 0 or Data minimum. Data minimum uses the minimum value from the data.
      Maximum	For the y-axis maximum, you can enter a custom value or select Data Maximum to use the maximum value from the data.

    • Axis Line: Configures the style of the x-axis line, including the line type, weight, and color. Click the icon to show or hide the axis line.

      Note

      If you select Dashed line or Dotted line for the line type, you can also configure the dash length and the distance between dashes.

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

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

    • Tick Marks: Configures the style of the x-axis tick marks, including the length, weight, and color. Click the icon to show or hide the x-axis tick marks.

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

      Parameter	Description
      Display Format	The time display format of the x-axis labels.
      Label Layout	The display style of the labels, including the expected number of x-axis ticks, the prefix and suffix content, the angle, the offset, and the alignment.
      Text Style	The font, weight, size, and color of the x-axis label text.

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

      Note

      If you select Dashed line or Dotted line for the line type, you can also configure the dash length and the distance between dashes.

  • Y-axis

    • Show Y-axis: Enable this option to show the y-axis. Disable it to hide the y-axis.

    • Data Type: Specifies the data type of the y-axis. The options are Numeric, Category, and Time.

    • Display Range: Specifies the minimum and maximum values to display for a numeric data type.

    • Axis Line: Configures the style of the y-axis line, including the line type, weight, and color. Click the icon to show or hide the y-axis line.

      Note

      If you select Dashed line or Dotted line for the line type, you can also configure the dash length and the distance between dashes.

    • Axis Title: Configures 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.
      Text Style	The font, weight, size, and color of the y-axis title text.

    • Tick Marks: Configures the style of the y-axis tick marks, including the length, weight, and color. Click the icon to show or hide the y-axis tick marks.

    • Axis Label: Configures 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 of the y-axis labels. This is configurable only when the y-axis Data Type is set to Numeric or Time.
      Label Layout	The display style of the labels, including the number of y-axis labels, the prefix and suffix content, the angle, the offset, and the alignment.
      Text Style	The font, weight, size, and color of the y-axis label text.

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

      Note

      If you select Dashed line or Dotted line for the line type, you can also configure the dash length and the distance between dashes.

• Animation: Configures the animation effects for the bullet chart.

  Parameter	Description
  Animation Switch	Enable this option to configure animation effects for the bullet chart.
  Animation Effect	The animation effect type. The system provides several common animation effects, such as Fade in, Scale in, and Slide in. This is configurable only when animation is enabled.
  Animation Duration	The duration of the animation effect in milliseconds (ms). This is configurable only when animation is enabled.

• Interaction: Configures the interaction effects for the bullet chart widget.

  • Tooltip: Determines whether a tooltip appears when you hover over or click the bullet icon on the preview or published page. Click the icon to enable or disable the tooltip.

    Parameter	Description
    Trigger Method	The method to trigger the tooltip. Options: Hover and Click.
    Display Position	The display position of the tooltip. Options: Top, Bottom, Left, and Right.
    Title Spacing	The distance between title texts in the tooltip, in px.
    Title Text	The style of the title text in the tooltip, including the font, weight, size, and color.
    Content Display	Click the or icon on the right to add or delete a tooltip content display series. Click the or icon to arrange multiple tooltip content display series. Click the icon to copy the current tooltip content display series and add a new one with the same configuration. Field Name: The field name of the tooltip content. This must match the field in the data panel. Display Name: The display name of the tooltip content.
    Content Spacing	The spacing between content texts in the tooltip, in px.
    Content Text	The style of the content text in the tooltip, including the font, weight, size, and color.
    Popup Background	The background style of the tooltip popup. Background Margin: The horizontal and vertical margin values of the tooltip popup background. Background Color: The background color of the tooltip. Border Style: The style of the tooltip border, including the border line type, border radius, line width, and border line color.
    Axis Pointer	The style of the tooltip's axis pointer, including the pointer type, weight, and color. Click the icon to enable or disable the axis pointer. Note If you select Dashed line or Dotted line for the line type, you can also configure the dash length and the distance between dashes.

  • Selected State: Specifies the style of the bullet icon when it is selected. You can click the icon to enable or disable this style.

    Parameter	Description
    Trigger Method	The method to trigger the selection of a bullet chart icon. Options: Hover and Click.
    Selection Method	The method to select bullet chart icons. Options: Single and Multiple. If you select Single, a click event emits a single data object and highlights only one bullet chart icon. If you select Multiple, a click event can emit multiple data items in an array and highlight multiple bullet chart icons.
    Bar Color	The color of the bullet chart icon in the selected state. Click the icon to enable or disable the heat color style for the selected state.
    Graphic Outline	The style of the bullet chart icon's outline, including the line type, weight, and color. Note If you select Dashed line or Dotted line for the line type, you can also configure the dash length and the distance between dashes.

• Legend: Configures the style of the chart legend.

  Parameter	Description
  Legend Switch	Turn on the switch to configure the legend style. Turn it off to disable this setting.
  Legend Position	The position of the legend relative to the widget's starting coordinate. Options: 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, weight, size, and color of the legend text.
  Legend Spacing	Sets the horizontal and vertical spacing of the legend, in px.
  Maximum Width	Sets the maximum width of the legend, in px.
  Allow Pagination	Enable this option to allow pagination for the legend. You can configure the page number style and arrow style for when there are too many legend items to display on one page. If you disable this option, all legend items are displayed on a single page without pagination. Page Number Style: The style of the page numbers, including the font, weight, size, and color. Arrow Style: The size, default color, and disabled color of the pagination arrows.
  Range Value Legend	Click the or icon on the right to add or delete a range value legend style. Click the or icon to arrange multiple range value legend styles. Click the icon to copy the current range value legend and add a new one with the same configuration. Display Name: The display name of the range value legend. Marker: The marker symbol for the range value legend, including its shape and size.
  Actual Value Legend	Click the or icon on the right to add or delete an actual value legend style. Click the or icon to arrange multiple actual value legend styles. Click the icon to copy the current actual value legend and add a new one with the same configuration. Display Name: The display name of the actual value legend. Marker: The marker symbol for the actual value legend, including its shape and size.
  Target Value Legend	Display Name: The display name of the target value legend. Marker: The marker symbol for the target value legend, including its shape and size.

• Conditions: Configures styles based on data conditions.

  Conditional Style: Click the or icon on the right 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 and add a new one with the same configuration. For more information, see Instructions for using the condition tree.

  Parameter	Description
  Chart Width	Sets the width of the bullet chart elements under the current condition, including the range value width, actual value width, and target value width. The unit is px.
  Range Value Color	Click the or icon on the right to add or delete a range value color style. Click the or icon to arrange multiple range value color styles. Click the icon to copy the current range value color style and add a new one with the same configuration.
  Actual Value Color	Click the or icon on the right to add or delete an actual value color style. Click the or icon to arrange multiple actual value color styles. Click the icon to copy the current actual value color style and add a new one with the same configuration.
  Target Value Style	Sets the style of the bullet chart's target value under the current condition, including the line type, weight, and color. Note If you select Dashed line or Dotted line for the line type, you can also configure the dash length and the distance between dashes.

Data panel

Field description

Interaction panel

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 Bullet Chart widget in the imported nodes pane. The configuration parameters for the bullet chart appear on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When the bullet chart API request is complete	This event is triggered after the data API request is complete and the data is processed by the filter. The event emits the processed data in JSON format. For a data example, see the Data Response Result area on the Data tab of the widget's configuration panel in the canvas editor.
     When the bullet chart API request fails	This event is triggered when the data API request fails due to issues such as network problems or API errors. The event is triggered after the failure is processed by the filter. The event emits the processed data in JSON format. For a data example, see the Data Response Result area on the Data tab of the widget's configuration panel in the canvas editor.
     When a data item is selected	This event is triggered when you click a data item in the bullet chart. The event emits the data for the selected item.
     When a legend item is clicked	This event is triggered when you click a legend item in the bullet chart. The event emits the data for the selected legend item.

   • Actions

     Action	Description
     Request Bullet Chart API	Requests data from the server-side again. Data emitted from input data processing nodes or layer nodes is used as parameters. For example, if the bullet chart is configured with an API data source of https://api.test and the data passed to the Request Bullet Chart API action is { id: '1'}, the final requested API is https://api.test?id=1.
     Import Bullet Chart API	Processes data according to the widget's drawing format and then imports it to the widget to redraw. This does not require re-requesting data from the server-side. For a data example, see the Data Response Result area on the Data tab of the widget's configuration panel in the canvas editor.
     Highlight	Highlights the element corresponding to a data item. The following code shows a data example. return { "data": { "x": data.x, // The data item to highlight "colorField": data.colorField }, "style": { "fillStyle": "#f00" // The fill color } }
     Reset Selection	Resets the selection. No parameters are required.
     Update Widget Configuration	Dynamically updates the style configuration of the widget. You must 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 reference data for the display component. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the widget. The following code shows a data example. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle Visibility	Toggles the visibility of the widget. The following code shows a data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the widget to a specified position. The following code shows a data example. 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 delay. "animationDuration": 1000, // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }