bullet-charts

Chart style

A bullet chart uses unadorned linear bars to convey rich data in a compact space, offering clearer information density than circular chart layouts. Colors represent data distribution and are set based on the influence range of data points on the canvas.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for a configuration item by name. 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 widget, 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: rotates the widget around its center, in degrees.

    • Enter the rotation angle directly 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

  Metric	description
  Chart Margins	Click the icon to toggle chart margins. When enabled, you can set the distance between the bullet chart area and each of the four widget boundaries, in pixels.
  Set the height of a shape object	The height of the bullet chart, which includes the interval value, actual value, and target value, in pixels.
  Actual Value	The actual value display of the bullet chart. Color: Click the or icon to add or delete a color style series. Click the or icon to configure the arrangement style of multiple color style series. Click the icon to copy the current color style series configuration and add a new color style series with the same configuration. Actual Value Labeling: turn on the switch to configure the actual value labels for the bullet chart. Relative Offset: the horizontal and vertical offsets of the actual value labels, in pixels. Text Style: the style of the label, including the font style, weight, font size, and color of the label. Text Stroke: the thickness and color of the text stroke.
  Target Tag	The target tag settings for the bullet chart. Target Style: the style of the target line, including the line type, line thickness, and line color. Target Value Labeling: turn on the switch to configure the target value labels for the bullet chart. Labeling Position: the position of the target label. Valid values: Left, Middle, and Right. Relative Offset: the horizontal and vertical offsets of the target value labels, in pixels. Text Style: the style of the label, including the font style, weight, font size, and color of the label. Text Stroke: the thickness and color of the text stroke.
  Interval Range	The interval range settings for the bullet chart. Range Color: Click the or icon to add or delete a color style series. Click the or icon to configure the arrangement style of multiple color style series. Click the icon to copy the current color style series configuration and add a new color style series with the same configuration. Label Interval Values: turn on the switch to display interval value labels on the bullet chart. Relative Offset: the horizontal and vertical offsets of the interval labels, in pixels. Text Style: the style of the label, including the font style, weight, font size, and color of the label. Text Stroke: the thickness and color of the text stroke.

• Coordinates: the x-axis and Y axes settings.

  • X-axis

    • x-axis Display: turn on the switch to show the x-axis in the widget. Turn off the switch to hide it.

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

      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.

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

      Metric	description
      Title Display	The text content of the x-axis title.
      Title Display	The display mode of the x-axis title, including the angle and offset values.
      Text Style	The font style, weight, size, and color of the x-axis title text.

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

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

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

    • Grid Line: the x-axis grid line style, including line type, thickness, color, length, and spacing. Click the icon to show or hide the x-axis grid lines.

      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 set.

  • Y-axis

    • Y-Axis Display: turn on the switch to show the Y-axis in the widget. Turn off the switch to hide it.

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

    • Display Range: the minimum and maximum values that are displayed when the data type is numeric.

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

      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 set.

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

      Metric	description
      Title Display	The text content of the Y-axis title.
      Display mode	The display mode of the Y-axis title, including the angle and offset values.
      Text Style	The font style, weight, font size, and color of the title text on the Y axis.

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

      Metric	description
      Display Format	The display format of the Y-axis label. Available only when Data Type is set to Numerical or Time.
      Label Display	The label display style, including the number of Y-axis labels, label prefix and suffix, angle, offset, and alignment.
      Text Style	The font style, weight, size, and color of the Y-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 Y-axis tick marks.

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

      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.

• Animation: the animation effects for the bullet chart.

  Metric	description
  Animation Switch	Turn on the switch to enable animation effects for the bullet chart.
  Animation	The animation type. Options include Fading, Zooming, and Stroking. Available only after you turn on Animation.
  Animation Duration	The duration of the animation effect, in milliseconds. Available only after you turn on Animation.

• Interactive: the interaction settings for the bullet chart widget.

  • dialog box: the tooltip style that appears when you hover over or click the bullet chart on the preview or publish page. Click the icon to enable or disable the tooltip.

    Metric	description
    Trigger	The method by which the dialog box is triggered. You can select Hover or Click.
    Display Position	The position of the tooltip. Valid values: Top, Bottom, Left, and Right.
    Title Spacing	The spacing between title lines in the tooltip, in pixels.
    Title Text	The style of the title text in the dialog box, including the font style, 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.
    Frame Background	The background style of the tooltip. Background Margin: the horizontal and vertical margins of the tooltip background. Background Color: The background color of the dialog box. Border Style: the tooltip border style, including line type, corner radius, line width, and color.
    Axis indicator	The tooltip axis indicator style, including type, thickness, and color. Click the icon to enable or disable the axis indicator. 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 selection state of the bullet chart. Click the icon to enable or disable selection.

    Metric	description
    Trigger	The trigger mode of the bullet icon. You can select one of the following options: Hover and Click.
    Select Method	The method that is used to select the bullet icon. Valid values: Single and Multiple. If you select Single-choice, the click event only throws one data record. The data format is an object and only one bullet icon can be highlighted. If you select Multiple-choice, the click event only throws multiple data records and the data format is an array to highlight multiple bullet icons.
    Column color	The color of the selected bullet icon. You can click the icon to enable or disable the selected color.
    Graphics Stroke	The stroke line style of the bullet icon, including the stroke line type, line thickness, and stroke line color. 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.

• Legend: the legend style of the bullet chart.

  Metric	description
  Legend Switch	Turn on the switch to configure the legend style.
  Legend Position	The legend position relative to the widget origin. 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.
  Chart Spacing	The horizontal and vertical spacing between the legend and the chart, in pixels.
  Legend Spacing	The horizontal and inner spacing between legends, in pixels.
  Maximum Width (Height)%	The maximum width of the legend, in pixels.
  Allow Page Turning	Turn on the switch to enable legend pagination. You can configure the page number style and arrow style when legends exceed the available space. When turned off, 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.
  Interval Legend	Click the or icon on the right to add or delete an interval value legend style. Click the or icon to configure legend styles for multiple interval values. Click the icon to copy the content of the selected interval value legend and add an interval value legend with the same configuration. Display Name: the name of the legend. Marker: the marker symbol of the interval legend, including the 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 configure multiple actual value legend styles. Click the icon to copy the selected actual value legend content and add an actual value legend with the same configuration. Display Name: the name of the actual value legend. Marker: the marker symbol of the actual value legend, including the shape and size.
  Target Value Legend	Display Name: the name of the target legend. Marker: the marker symbol of the target legend, including the shape and size.

• Condition: conditional style settings.

  Conditional Style: Click the or icon to add or delete a conditional style series. Click the or icon to configure the arrangement style of multiple conditional style series. Click the icon to copy the selected conditional style series and add a conditional style series with the same configuration. For more information about how to configure conditional styles in each series, see Use conditional trees.

  Metric	description
  Set the width of a shape object	The graphic width of the bullet chart under the current condition, including the interval value width, actual value width, and target value width, in pixels.
  Interval Color	Click the or icon on the right to add or delete a range value color style. Click the or icon to configure multiple interval sample color styles. Click the icon to copy the selected interval value color style and add a new color style with the same configuration.
  Actual Value Color	Click the or icon on the right to add or remove an actual value color style. Click the or icon to configure multiple actual value color styles. Click the icon to copy the selected actual value color style and add a new color style with the same configuration.
  Target Value Style	The target value line style under the current condition, including line type, thickness, and color. 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.

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 bullet graph interface request is completed	After a data interface request is responded to and processed by a filter, this event is triggered with the processed JSON data. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel.
     When a data item is selected	Triggered when a data item in the bullet chart is clicked. The corresponding data item is returned.
     When the legend is clicked	Triggered when a legend in the bullet chart is clicked. The corresponding legend data item is returned.

   • Action

     Action	Description
     Import Bullet Graph Interface	Imports pre-processed data in the widget's drawing format for redrawing, without re-requesting server data. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel.
     Request Bullet Graph Interface	Re-requests server data using the parameters from an upstream data processing node or layer node. For example, if the API data source is https://api.test and the data passed to the Request Bullet Chart API action is { id: '1'}, the final request URL is https://api.test?id=1.
     Highlight	The data item to highlight. Single highlight { title: "Chongqing", measures: 30 }, { Title: 'Chongqing' }, { measures: 30 } Bulk Highlight [ { title: "Chongqing", measures: 30 }, title: 'Hangzhou,' ranges: 20 ] style: the highlight style, such as fillStyle, stroke, and opacity. If not specified, the default style is used. Reference data example { "data": {}, "style": {} }
     Reset selections	Resets the current selection. No parameters are required.
     Move	Moves the widget to a specified location. See the data example below. { // 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 the widget. No parameters are required.
     Display	Shows the widget. See the data example below. { "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	Hides the widget. See the data example below. { "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 in the data processing node in Blueprint Editor.