ECharts candlestick chart
This article covers the chart style and configuration panel for ECharts candlestick charts.
Chart style
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.
Legend: Click the eye icon on the right to show the legend settings.
Left: The distance between the legend and the left edge of the component. The default is 25%. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's width, such as 20%.
Keywords left, center, or right. Using a keyword aligns the component automatically.
Top: The distance between the legend and the top edge of the component. The default is auto. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's height, such as 20%.
Keywords top, center, or bottom. Using a keyword aligns the component automatically.
Right: The distance between the legend and the right edge of the component. The default is auto. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's width, such as 20%.
Keywords left, center, or right. Using a keyword aligns the component automatically.
Bottom: The distance between the legend and the bottom edge of the component. The default is auto. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's height, such as 20%.
Keywords top, center, or bottom. Using a keyword aligns the component automatically.
Width: The width of the legend. The default value, auto, fits the content width.
Height: The height of the legend. The default value, auto, fits the content height.
Orientation: The layout orientation for the legend items.
Horizontal: Arranges legend items horizontally.
Vertical: Arranges legend items vertically.
Align: The alignment of the legend symbol relative to its text.
Left align: When the graphic is to the left of the text, the alignment is Left align.
Center align: When the graphic and text of the legend overlap, the alignment is Center align.
Right align: When the graphic is to the right of the text, it is right-aligned.
Padding: The padding of the legend, in pixels (px). Click + or -, or enter a value to adjust it. The default padding is 5px for all sides.
Item Gap: The spacing between legend items. Click + or -, or enter a value to adjust it. This sets the horizontal gap for a horizontal layout and the vertical gap for a vertical layout.
Symbol Width: The width of the legend symbols. Click + or -, or enter a value to adjust it.
Symbol Height: The height of the legend symbols. Click + or -, or enter a value to adjust it.
Select Mode: Click the eye icon on the right to show the selection mode setting.
Inactive Color: The color of a legend item in its inactive state. For details, see Color Picker. This effect is visible only in the preview or on the published page when you click a legend item.
Text style
Color: The color of the legend text. For details, see Color Picker.
Font Style: The font style of the legend text.
Font weight: The font weight of the legend text.
Font Family: The font family of the legend text.
Font size: The font size of the legend text. Click + or -, or enter a value to adjust it.
Background color: The background color of the legend. For details, see Color Picker.
Border color: The border color of the legend. For details, see Color Picker.
Border Width: The border width of the legend. Click + or -, or enter a value to adjust it.
Grid: Click the eye icon on the right to show the grid settings.
Left: The distance between the grid and the left edge of the component. The default is 3%. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's width, such as 20%.
Keywords left, center, or right. Using a keyword aligns the component automatically.
Top: The distance between the grid and the top edge of the component. The default is 60. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's height, such as 20%.
Keywords top, center, or bottom. Using a keyword aligns the component automatically.
Right: The distance between the grid and the right edge of the component. The default is 4%. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's width, such as 20%.
Keywords left, center, or right. Using a keyword aligns the component automatically.
Bottom: The distance between the grid and the bottom edge of the component. The default is 3%. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's height, such as 20%.
Keywords top, center, or bottom. Using a keyword aligns the component automatically.
Width: The width of the grid. The default value, auto, fits the content width.
Height: The height of the grid. The default value, auto, fits the content height.
Responsive layout: Enables a responsive layout for the chart. If cleared, the chart uses the layout defined by your settings.
Background color: The background color of the grid, which is transparent by default. For details, see Color Picker.
Border color: The border color of the grid, which is transparent by default. For details, see Color Picker.
Border Width: The border width of the grid. Click + or -, or enter a value to adjust it.
X-axis: Click the eye icon on the right to show the x-axis settings.
Offset: The offset of the x-axis from its default position. The default is 0.
Name: A custom name for the x-axis.
Name Location: The position of the x-axis name. Options are Start, Center, and End. The default is End.
Name Style
Color: The color of the x-axis name. For details, see Color Picker.
Font Style: The font style of the x-axis name.
Font Weight: The font weight of the x-axis name.
Font Family: The font family of the x-axis name.
Font Size: The font size of the x-axis name. Click + or -, or enter a value to adjust it.
Name Gap: The distance between the axis name and the axis line. Click + or -, or enter a value to adjust it.
Name Rotate: The rotation angle of the axis name. Click + or -, or enter a value to adjust it.
Inverse: Reverses the rendering direction of the axis.
Boundary Gap: Adds padding to both ends of the axis.
Min: The minimum value of the axis scale. By default (Data Min), this is the minimum data value on the axis. If left unset, it is automatically calculated to ensure the scale is evenly distributed.
Max: The maximum value of the axis scale. By default (Data Max), this is the maximum data value on the axis. If left unset, it is automatically calculated to ensure the scale is evenly distributed.
Auto-scaling: When selected, the axis is not forced to include the zero tick. This option applies only to numerical axes and is ignored if you set a maximum and minimum value.
Silent: Select to make the axis static and non-interactive.
Axis line: Click the eye icon on the right to show the x-axis line settings.
On Zero: Renders the x-axis or y-axis line at the 0 scale mark of the other axis. This is effective only when the other axis is a numerical axis and includes the 0 scale mark.
Axis Line Style
Color: The color of the x-axis line. For details, see Color Picker.
Width: The width of the x-axis line. Click + or -, or enter a value to adjust it.
Type: The type of the axis line. Options are Solid and Dashed.
Opacity: The opacity of the x-axis line. The value must be in the range [0, 1]. Click + or -, or enter a value to adjust it.
Axis tick: Click the eye icon on the right to show the x-axis tick settings.
Align with Label: Select to align tick marks with labels. For category axes, this is effective only when Boundary Gap is enabled.
Interval: The display interval of axis ticks. This setting is effective only for category axes. Click + or -, or enter a value to adjust it.
Inside: Select to make axis ticks face inward. Clear to make them face outward.
Length: The length of the axis ticks. Click + or -, or enter a value to adjust it.
Line Style
Color: The color of the tick marks. You can select a Solid Color or a Gradient. For details, see Color Picker.
Width: The width of the tick marks. Click + or -, or enter a value to adjust it.
Type: The type of the tick mark line. Options are Solid and Dashed.
Opacity: The opacity of the tick marks. The value must be in the range [0, 1]. Click + or -, or enter a value to adjust it.
Axis label: Click the eye icon on the right to show the x-axis label settings.
Label Interval: The display interval of axis labels. This setting is effective on category axes. By default, labels are automatically spaced out to prevent them from overlapping. You can set this parameter to 0 to force all labels to be displayed. If you set it to 1, it means that every other label is displayed. If the value is 2, it means that every third label is displayed, and so on.
Inside: Select to display axis labels inside the axis. Clear to display them outside.
Rotate: The rotation angle of the axis labels, from -90 to 90 degrees. Rotating labels can prevent them from overlapping on a category axis.
Margin: The distance between the axis labels and the axis line.
Show Min Label: Forces the minimum axis label to always be displayed. By default, it is hidden if it overlaps other labels.
Show Max Label: Forces the maximum axis label to always be displayed. By default, it is hidden if it overlaps other labels.
Text style
Color: The color of the axis labels. For details, see Color Picker.
Font Style: The font style of the axis label text.
Font Weight: The font weight of the axis label text.
Font Family: The font family of the axis label text.
Font Size: The font size of the axis label text.
Align: The horizontal alignment of the axis label text. Options are Left, Center, and Right.
Vertical Align: The vertical alignment of the axis label text. Options are Top, Center, and Bottom.
Split line: Click the eye icon on the right to show the split lines.
Split interval: Click + or -, or manually enter a value to change the display interval of axis split lines. This setting is effective for category axes. By default, split lines are displayed at an interval that prevents them from overlapping. You can set this to 0 to force all split lines to be displayed. If you set it to 1, every other split line is displayed. If the value is 2, one of every three split lines is displayed, and so on.
Line Style
Width: The width of the x-axis split lines. Click + or -, or enter a value to adjust it.
Type: The type of the split line. Options are Solid and Dashed.
Opacity: The opacity of the x-axis split lines. The value must be in the range [0, 1]. Click + or -, or enter a value to adjust it.
Split area: Click the eye icon on the right to show the split areas.
Split Interval: Click the + or - sign, or manually enter a value to change the display interval of split areas on an axis. This setting applies only to category axes. By default, split areas are displayed at an interval that prevents them from overlapping. Set this parameter to 0 to display all split areas. If you set this parameter to 1, every other split area is displayed. If you set it to 2, one of every three split areas is displayed, and so on.
Area Style
Opacity: The opacity of the split areas. The value must be in the range [0, 1]. Click + or -, or enter a value to adjust it.
Axis pointer: Click the eye icon on the right to show the axis pointer.
Type: The type of the pointer. Options are Line and Shadow.
Snap: Select to automatically snap the axis pointer to data points. This is useful for numerical and time axes to find the precise value of a data point.
Value: The initial position of the axis pointer. The default is 0.
Status: Shows or hides the axis pointer.
Label: Click the eye icon on the right to show the axis pointer's label.
Precision: The number of decimal places for the label's value. By default, it is automatically determined based on the axis value. You can also specify an integer, such as 2, to display two decimal places.
Margin: Select to add a margin between the axis pointer label and the axis.
Text style
Color: The color of the axis pointer label text. For details, see Color Picker.
Font Style: The font style of the axis pointer label text.
Font Weight: The font weight of the axis pointer label text.
Font Family: The font family of the axis pointer label text.
Font Size: The font size of the axis pointer label text.
Background color: The background color of the axis pointer text label.
Border color: The border color of the axis pointer text label.
Border Width: The border width of the axis pointer text label.
Line Style
Color: The color of the axis line. For details, see Color Picker.
Width: The width of the axis line. Click + or -, or enter a value to adjust it.
Type: The type of the axis line. Options are Solid and Dashed.
Opacity: The opacity of the axis line. The value must be in the range [0, 1]. Click + or -, or enter a value to adjust it.
Handle: Click the eye icon on the right to show the handle.
Size: The size of the handle. Click + or -, or enter a value to adjust it.
Margin: The distance between the center of the handle and the axis. Click + or -, or enter a value to adjust it.
Color: The color of the handle.
Throttle: The update interval, in milliseconds, when dragging the handle. A larger value can improve performance but reduces responsiveness.
Y-axis: For configuration details, see the X-axis settings.
Data zoom: Click the eye icon on the right to show the data zoom control.
Start Percentage: The starting percentage of the data window range for the candlestick chart.
End Percentage: The ending percentage of the data window range for the candlestick chart.
Left: The distance between the data zoom control and the left edge of the component. The default is auto. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's width, such as 20%.
Keywords left, center, or right. Using a keyword aligns the component automatically.
Top: The distance between the data zoom control and the top edge of the component. The default is auto. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's height, such as 20%.
Keywords top, center, or bottom. Using a keyword aligns the component automatically.
Right: The distance between the data zoom control and the right edge of the component. The default is auto. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's width, such as 20%.
Keywords left, center, or right. Using a keyword aligns the component automatically.
Bottom: The distance between the data zoom control and the bottom edge of the component. The default is auto. The following input formats are supported:
A specific pixel value, such as 20.
A percentage of the container's height, such as 20%.
Keywords top, center, or bottom. Using a keyword aligns the component automatically.
Orientation: The layout orientation of the data zoom control. Options are Horizontal and Vertical.
Zoom Lock: Click the eye icon on the right to lock the zoom level.
Text style
Color: The color of the text. For details, see Color Picker.
Font Style: The font style of the text.
Font Weight: The font weight of the text.
Font Family: The font family of the text.
Font Size: The font size of the text. Click + or -, or enter a value to adjust it.
Data Background Style
Line Style
Color: The color of the line. For details, see Color Picker.
Width: The width of the line. Click + or -, or enter a value to adjust it.
Type: The type of the line. Options are Solid and Dashed.
Area Style
Color: The color of the area. For details, see Color Picker.
Handle Icon (SVG path): The SVG path string for the handle icon.
Handle Size: The size of the handle icon.
Handle Style
Color: The background color of the handle. For details, see Color Picker.
Border color: The border color of the handle. For details, see Color Picker.
Border Width: The border width of the handle. Click + or -, or enter a value to adjust it.
Border Style: The stroke type for the border. Options are Solid and Dashed.
Opacity: The opacity of the handle. The value must be in the range [0, 1]. Click + or -, or enter a value to adjust it.
Tooltip: Click the eye icon on the right to show the tooltip settings.
Trigger: The event that triggers the tooltip. Options are Mouse move, Click, and Mouse move and click.
Background color: The background color of the tooltip. For details, see Color Picker.
Border color: The border color of the tooltip. For details, see Color Picker.
Border Width: The border width of the tooltip. Click + or -, or enter a value to adjust it.
Padding: The padding of the tooltip, in pixels (px). Click + or -, or enter a value to adjust it. The default padding is 5px for all sides.
Text style
Color: The color of the tooltip text. For details, see Color Picker.
Font Style: The font style of the tooltip text.
Font Weight: The font weight of the tooltip text.
Font Family: The font family of the tooltip text.
Font Size: The font size of the tooltip text.
Series: Click the
or icon to add or delete a series. Click the or icon to arrange the order of multiple series. Click the icon to duplicate the currently selected series and its configuration.Name: A custom name for the series. This name must match the value of the s field in your data.
Type: The type of the series. Options are candlestick and line.
Symbol: The marker for data points. The default is emptyCircle. Options include emptyCircle, rect, roundRect, triangle, diamond, pin, arrow, and none. You can also specify an image by setting the value to an image URL or a path string. For details, see the ECharts website.
Symbol Size: The size of the symbol. Click + or -, or enter a value to adjust it.
Symbol Rotate: The rotation angle of the symbol. Click + or -, or enter a value to adjust it.
Show Symbol: Toggles the visibility of symbols.
Hover Animation: Select to enable animation effects on mouse hover.
Legend Hover Link: Select to enable hover interactions between the chart and the legend.
Stack: The stack name for the data. Series on the same category axis that share a stack name are stacked.
Connect Nulls: Select to connect null data points in the chart.
Clip: Select to clip any part of the chart that extends beyond the coordinate system area.
Step: Renders the series as a step line chart. Set to true to enable it. You can also set it to start, middle, or end to specify where the inflection point of the step occurs.
Label
Normal state: Click the eye icon on the right to show labels for items in their normal (non-hovered) state.
Position: The position of the label relative to the candlestick chart item. Options include, but are not limited to, top, left, and inside.
Text style
Color: The label text color in the normal state. For details, see Color Picker.
Font Style: The label text font style in the normal state.
Font Weight: The label text font weight in the normal state.
Font Family: The label text font family in the normal state.
Font Size: The label text font size in the normal state.
Emphasis state: Click the eye icon on the right to show labels for items in their emphasis (hovered) state.
Position: The position of the label relative to the candlestick chart item. Options include, but are not limited to, top, left, and inside.
Text style
Color: The label text color in the emphasis state. For details, see Color Picker.
Font Style: The label text font style in the emphasis state.
Font Weight: The label text font weight in the emphasis state.
Font Family: The label text font family in the emphasis state.
Font Size: The label text font size in the emphasis state.
Item style
Normal state
Up Color: The color for rising (positive) values in the normal state. For details, see Color Picker.
Up Border Color: The border color for rising (positive) values in the normal state. For details, see Color Picker.
Down Color: The color for falling (negative) values in the normal state. For details, see Color Picker.
Down Border Color: The border color for falling (negative) values in the normal state. For details, see Color Picker.
Border Width: The border width of items in the normal state. Click + or -, or enter a value to adjust it.
Border Style: The stroke type for the border. Options are Solid and Dashed.
Opacity: The opacity of items in the normal state. The value must be in the range [0, 1]. Click + or -, or enter a value to adjust it.
Emphasis state
Color: The background color of items in the emphasis state. For details, see Color Picker.
Border color: The border color of items in the emphasis state. For details, see Color Picker.
Border Width: The border width of items in the emphasis state. Click + or -, or enter a value to adjust it.
Border Style: The stroke type for the border. Options are Solid and Dashed.
Opacity: The opacity of items in the emphasis state. The value must be in the range [0, 1]. Click + or -, or enter a value to adjust it.
Line Style
Normal state
Color: The color of the line. You can select a Solid Color or a Gradient. For details, see Color Picker.
Width: The width of the line. Click + or -, or enter a value to adjust it.
Type: The stroke type of the line. Options are Solid and Dashed.
Opacity: The opacity of the line. The value must be in the range [0, 1]. Click + or -, or enter a value to adjust it.
Smooth line: Click the eye icon on the right to show or hide the smoothed line.
Monotone Smoothing: The smoothing algorithm for the line chart.
Downsampling: The downsampling strategy for a line chart when the data volume exceeds the available pixel space. Options include, but are not limited to, max, min, and average.
Silent: Select to make the series non-interactive, so it will not respond to or trigger mouse events.
Animation: Select to enable animation effects.
icon to vertically flip a widget.
or 
icon to add or delete a series. Click the 
or 
icon to arrange the order of multiple series. Click the 
icon to duplicate the currently selected series and its configuration.
Data panel
Fields
Parameter | Description |
| Specifies the categories for the x-axis. |
| Specifies the opening price for the candlestick chart. |
| Specifies the closing price for the candlestick chart. |
| Specifies the lowest price for the candlestick chart. |
| Specifies the highest price for the candlestick chart. |
Parameter | Description |
Controlled mode | When enabled, the component does not request data on initialization. Data is requested only through a callback ID or a method configured in the Blueprint Editor. When disabled, the component can request data using automatic updates. This option is disabled by default. |
Automatic update | When selected, you can enable dynamic polling and set a polling interval. If this option is cleared, data does not update automatically. You must manually refresh the page or trigger an update using the Blueprint Editor or callback ID events. |
Data source | Click Configure Data Source to open the Set Data Source panel. In this panel, you can modify the data source type, edit the data query code, preview the results, and view the data response. For more information, see Configure asset data. |
Data filter | The data filter lets you transform data structures, filter data, and perform simple calculations. Click Add Filter to configure a data filter script in the Set Data Source panel. For more information, see Use a filter. |
Data response | This field displays the data response. When the data source changes, you can click the |
icon on the right to view the latest response.Interaction panel
Interactions
Interaction | Description |
When a data item is clicked | Select Enable to allow the candlestick chart component to return a callback value when a data item is clicked. By default, the callback value includes the value and open fields from the data. For configuration details, see component callback ID configuration. |
When a legend item is clicked | Select Enable to allow the candlestick chart component to return a callback value when a legend item is clicked. By default, the callback value includes the selected field from the data. For configuration details, see component callback ID configuration. |
Configure interactions in the blueprint editor
In the Canvas Editor, right-click a component and select Export to Blueprint Editor.
Click the
icon in the upper-left corner of the page.On the Blueprint Editor page, click the Candlestick Chart component in the import node pane. The canvas then displays the configuration parameters for the candlestick chart, as shown in the following figure.
Events
Event
Description
When data API request is successful
This event triggers after a data API request returns successfully and a filter processes the response. The event payload includes the processed data in JSON format. For a data sample, see the Data Response Result area on the Data tab in the component's configuration panel in the Canvas Editor.
When data API request fails
This event triggers when a data API request fails (for example, due to network issues or an API error) and a filter processes the response. The event payload includes the processed data in JSON format. For a data sample, see the Data Response Result area on the Data tab in the component's configuration panel in the Canvas Editor.
When a data item is clicked
Triggers when a user clicks a data item in the candlestick chart. The event payload includes the corresponding data item.
When the legend is clicked
Triggers when a user clicks a legend item. The event payload includes the corresponding data item.
Actions
Actions
Description
Request data API
Re-requests server-side data using data from upstream data processing nodes or layer nodes as parameters. For example, if the candlestick chart's data API source is set to
https://api.testand the data passed to the Request data API action is{ id: '1'}, the final request URL ishttps://api.test?id=1.Import data API
Formats the incoming data according to the component's rendering schema, imports the data, and redraws the component. This action does not re-request server-side data. For a data sample, see the Data Response Result area on the Data tab in the component's configuration panel in the Canvas Editor.
Show tooltip
This action accepts an object. Its parameters include
dataindex(the data index),name(the data name),x(the x-coordinate), andy(the y-coordinate). Data sample:{ "dataIndex": 1, "name": "", "x": 1, "y": 1 }Hide tooltip
Hides the tooltip. No parameters are required.
Legend control
This action accepts an object. Its parameters include
type(the legend action type) andname(the legend name). Data sample:{ "type": "legendToggleSelect", "name": "" }Update component configuration
Dynamically updates the component's style configuration. First, obtain the component's configuration data by clicking Copy Configuration to Clipboard in the component's Configuration panel. Then, in a data processing node in the Blueprint Editor, modify the values of the required style fields.
Show
Shows the component. Data sample:
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }Hide
Hides the component. Data sample:
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }Toggle visibility
Toggles the visibility of the component. Data sample:
return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }Move
Moves the component to a specified position. Data sample:
return{ // Position type: 'to' (absolute) or 'by' (relative). Default: 'to'. "positionType": "to", // Target position (x and y coordinates). "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration (ms). "animationDuration": 1000, // Easing function. Options: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } }
icon in the upper-left corner of the page.