Candlestick Chart
A Candlestick Chart is a graphical representation that displays the daily, weekly, or monthly changes in stock prices, including open price, close price, high price, and low price.
Each candlestick consists of three main parts: an upper shadow line (wick) at the top, a central body, and a lower shadow line (wick) at the bottom. When the closing price is higher than the opening price, indicating an upward trend, the candlestick is called a bullish candlestick, and the central body is usually displayed in white or red. The length of the upper shadow line represents the difference between the high price and the close price, the length of the body represents the difference between the close price and the open price, and the length of the lower shadow line represents the difference between the open price and the low price.
Advantages: Candlestick charts can display both the trend of data changes and the volatility of data.
Disadvantages: Candlestick charts are very complex to draw, making them one of the most difficult types of charts to create, with numerous variations of bearish and bullish candlesticks.
Key Data Points
- Open Price: The price of a stock at the start of a trading day.
- Close Price: The price of a stock at the end of a trading day.
- High Price: The highest price of a stock during a trading day.
- Low Price: The lowest price of a stock during a trading day.
Settings
Data Settings
| Setting | Description |
|---|---|
| Data Source | Select the data source for the candlestick chart |
| Name Field | Select a field returned by the data source, which is used to display the name of the candlestick chart label, typically displayed in conjunction with the Floating Display menu. |
| X-axis Field | Select a field returned by the Data Source menu and set it as the X-axis of the candlestick chart. You can modify the axis configuration in the X-axis menu. |
| Y-axis Field | Select a field returned by the Data Source menu and set it as the Y-axis of the candlestick chart. You can modify the axis configuration in the Y-axis menu. You need to configure Open Price, Close Price, High Price, and Low Price in order. |
Chart Settings
| Setting | Description |
|---|---|
| X-axis | Select the X-axis where the candlestick chart is located. You can add multiple X-axes in the X-axis menu. |
| Y-axis | Select the Y-axis where the candlestick chart is located. You can add multiple Y-axes in the Y-axis menu. |
| Color Assignment Type | Configure the color effect of the candlestick chart. Options: Assign colors from the palette by chart and Assign colors from the palette by data item.You can select assignment by chart when aggregating multiple charts, and assignment by data item for a single chart. The specific color values can be adjusted in the palette of the Style menu. |
| Layout Method | Configure the display method of boxes in the chart. Options: Empty, Arrange boxes horizontally, Arrange boxes vertically |
| Bar Width | Set the default width parameter of candlestick bars |
| Maximum Bar Width | Set the maximum adaptive width of candlestick bars |
| Minimum Bar Width | Set the minimum adaptive width of candlestick bars |
Label Settings
| Setting | Description |
|---|---|
| Display Label | Enable or disable the display of labels on candlestick bars |
| Display Content Expression | Customize expressions to implement complex content display scenarios. The display priority is lower than [Display Content]. |
| Display Content | Edit the content displayed in the label. It does not support complex expression syntax except for prompt content. The display priority is higher than [Display Content Expression]. |
| Position | Select the display position of the label on the candlestick bar |
| Distance from Shape | Set the distance between the label and the candlestick bar |
| Label Rotation | Set the rotation angle of the label |
| Text Offset X | Set the distance of the label from the X-axis |
| Text Offset Y | Set the distance of the label from the Y-axis |
| Color | Set the color of the label text |
| Background Color | Set the background color of the label text. It needs to be used together with parameters such as line height, padding, width, and height in text styles to take effect. |
| Text Style | Set the label text to italic or normal mode |
| Font Weight | Set the font weight of the label. Options: Default, Bold, Extra Bold, Light |
| Font | Set the font style of the label. Options: sans-serif, serif, monospace, Arial, Courier NEW |
| Font Size | Set the font size of the label. The font size should not be less than 12 or exceed 100. |
| Horizontal Alignment | Set the horizontal alignment of the label text, including four options: Auto, Left, Center, and Right. |
| Vertical Alignment | Set the vertical alignment of the label text, including four options: Auto, Top, Center, and Bottom. |
| Line Height | Set the line height of the label text. It takes effect when Width Overflow Handling is set to wrap. |
| Padding | Set the distance of the label text within the background frame |
| Width | Set the maximum display width of the label text. It is generally used with Width Overflow Handling for line wrapping and other configurations. |
| Height | Set the display height of the label text. It only affects the height of the text background, not the display of the text itself. |
| Width Overflow Handling | The processing method when the label exceeds the maximum width, including two types: line wrapping and truncation with ellipsis. If set to None, the maximum width will not take effect. |
| Stroke Width | Set the stroke width of the label background. It takes effect only after setting the stroke color. |
| Stroke Color | Set the stroke color value of the label background |
| Stroke Radius | Set the stroke rounded corner degree of the label background |
| Shadow Color | Set the shadow color of the label background. It takes effect only after setting the label background color and shadow size. |
| Shadow Size | Set the shadow size of the label background |
| Shadow Horizontal Offset | Set the horizontal offset distance of the label background shadow |
| Shadow Vertical Offset | Set the vertical offset distance of the label background shadow |
Bar Style
| Setting | Description |
|---|---|
| Color | Set the color effect of the bars |
| Border Color | Set the color effect of the bar borders |
| Stroke Type | Configure the stroke type of the bars Options: Solid Line, Dashed Line, Dotted Line |
| Stroke Width | Set the stroke width of the bars |
| Stroke Color | Set the stroke color of the bars |
| Stroke Radius | Set the stroke rounded corner angle of the bars |
| Shadow Color | Set the shadow color value of the bars |
| Shadow | Set the shadow area size of the bars |
| Shadow Horizontal Offset | Set the horizontal offset of the bar shadow |
| Shadow Vertical Offset | Set the vertical offset of the bar shadow |
| Opacity | Set the opacity of the bars, with values ranging from 0 to 1 |
Label Layout
| Setting | Description |
|---|---|
| Hide Overlapping Labels | When enabled, labels that overlap each other will be hidden |
| Overlap Offset Direction | When labels overlap, you can select the direction of label displacement, with two options: horizontal or vertical displacement |
Highlight Settings
| Setting | Description |
|---|---|
| Disable Highlight | After disabling highlight, the label will no longer be highlighted when the mouse moves to the label position |
| Behavior on Highlight | Set the interactive style for highlight display |
| Fade Range | Set the fade selection range of the interactive interface during highlight, providing three options: fade coordinate system, fade chart, or global fade |
Events
| Setting | Description |
|---|---|
| Non-clickable | When enabled, all label data in the chart cannot be clicked. When disabled, you can set corresponding data click interactive events. |
| Call Automation on Click | You can select the corresponding automation to implement related data label click interactive events, such as opening the corresponding data form details or other web links after clicking. |
| Call Automation on Double Click | The function is the same as click call, but the interaction is triggered by double-click instead of single-click. You can set both click and double-click events at the same time. |
Usage Example
To simulate a candlestick chart configuration, we need to prepare a data table first. The specific data structure is as follows:
| Field Name | Field Type |
|---|---|
| Open Price | Decimal |
| Close Price | Decimal |
| High Price | Decimal |
| Low Price | Decimal |
| Time | String or Date |
Configuration Example
Note: The Y-axis fields must be configured in the order of Open Price, Close Price, High Price, and Low Price; otherwise, it will not be displayed correctly.