Candlestick Chart
The CandleStick chart is a chart type often used in Financial charts. You can configure both a bar and a line on the same row.


There's a lot of data being displayed on a single column, so when you want to use this graph you need to have access to 4 different Numeric data-points per column. This could also be a great candidate to transform the data through Views when you want to do some calculation based on data points you have in your database.
Adding a Candlestick Chart
To add the Candlestick chart, first place a Data Provider and add the chart nested to it. To add the chart, click Chart > Candlestick Chart


Displaying data
Now that the Candlestick chart has been added to the UI, you can display data. For this type of chart you'll need 4 types of Numeric datapoints.
These 4 data points, or columns
, are for the following fields:
Setting | Description |
---|---|
Open | The opening for the |
Close | The closing for the |
High | The high for the |
Low | The low for the |
What determines the colour?
When colour will be red or green depending on the
open
andclose
values. Ifclose
is a lower number thanopen
, the colour will be red. If theclose
is higher than theopen
then the colour will be green. This also applies to the line in the chart, not just the bar.
The labels on the x-axis are supposed to be dates, this is a financial chart after all. So when picking the Date column
, make sure you use a Date/time field for best results.
There aren't a whole lot of other customization options in the Settings PanelSettings Panel - The Settings Panel is where you can configure every property of a design element. By default this is displayed, when clicking an element when you're in the Budibase Design Section, on the right. for the Candlestick chart, but of course, there are some. You can find them in the reference table below.
Settings Panel
Data Columns
There are 4 data column fields, which are explained in the
Displaying data
section above.
Besides the settings already explained, there are a few which you can still configure in the Settings PanelSettings Panel - The Settings Panel is where you can configure every property of a design element. By default this is displayed, when clicking an element when you're in the Budibase Design Section, on the right..
Setting | Description |
---|---|
Provider | The Data Provider as a parent of your chart |
Format | Will divide by thousand or million on the axis and adds a |
Y-axis Label | The labels you want to display next to the Y and X-axis. |
Width | The size you want the chart to be, supports all CSS supported sizes |
Animate | Will animate when the data changes or on startup. Data-change can happen through Dynamic filter's for example. |
Updated about 2 months ago