# Candlestick Chart

A Candlestick Chart (or Candle Chart) is a type of financial chart that describes the price changes of a security, derivative, or currency. Candlestick graphs and charts usually represent data as numerical values in vertical axes and compare the price movements across time, visualizing the open, high, low, and close values.

{% hint style="info" %}
You can find a more in depth explanation about the candlestick chart on [this](https://apexcharts.com/docs/chart-types/candlestick/) page: [https://apexcharts.com/docs/chart-types/candlestick/  ](https://apexcharts.com/docs/chart-types/candlestick/)
{% endhint %}

![Candlestick Chart](https://1449034948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_NpOsk0sjotPXNy29Q%2Fuploads%2FKntVMwVkw5qOolSVAg6j%2Fimage.png?alt=media\&token=d4398e57-27c4-4178-9445-0c265c794926)

**Properties of Candle Stick Chart**

<table><thead><tr><th width="168.7142857142857">Property Name</th><th width="150">Data type</th><th width="150">Type</th><th>Description</th></tr></thead><tbody><tr><td>Data source</td><td>List</td><td>Data Model</td><td>Data list source for the widget.</td></tr><tr><td>X axis date</td><td>Date</td><td>Expression</td><td>Date values displayed on x-axis.</td></tr><tr><td>Y axis open</td><td>Number</td><td>Expression</td><td>Open price displayed on y-axis.</td></tr><tr><td>Y axis high</td><td>Number</td><td>Expression</td><td>High price displayed on y-axis.</td></tr><tr><td>Y axis low</td><td>Number</td><td>Expression</td><td>Low price displayed on y-axis.</td></tr><tr><td>Y axis close</td><td>Number</td><td>Expression</td><td>Close price displayed on y-axis.</td></tr><tr><td>Custom scale</td><td>Boolean</td><td> </td><td>Change scale to a custom scale with custom properties.</td></tr><tr><td>Use opposite scale</td><td>Boolean</td><td>Expression</td><td>Changes position of y axis values to the opposite position.</td></tr><tr><td>Min scale value</td><td>Number</td><td>Expression</td><td>Minimum value for the scale.</td></tr><tr><td>Max scale value</td><td>Number</td><td>Expression</td><td>Maximum value for the scale.</td></tr><tr><td>Tick scale amount</td><td>Number</td><td>Expression</td><td>Number of visual ticks for the scale on the vertical axis.</td></tr><tr><td>Show tooltip</td><td>Boolean</td><td>Expression</td><td>Show tooltip. Use true or false.</td></tr><tr><td>X axis tooltip</td><td>Boolean</td><td>Expression</td><td>Show x-axis tooltip.</td></tr><tr><td>Y axis tooltip</td><td>Boolean</td><td>Expression</td><td>Show y-axis tooltip.</td></tr><tr><td>Label decimals</td><td>Number</td><td>Expression</td><td>Set number of decimals displayed for y-axis values.</td></tr><tr><td>Theme</td><td>Text</td><td>Dropdown</td><td>Change the text and background colors of the chart.</td></tr><tr><td>Upward color</td><td>Text</td><td>Expression</td><td>Upward color for the chart.</td></tr><tr><td>Downward color</td><td>Text</td><td>Expression</td><td>Downward color for the chart.</td></tr><tr><td>Background color</td><td>Text</td><td>Expression</td><td><p>Change the background color of the chart. It's important to set the opacity with the color to show the gridlines.</p><p>Examples:</p><p>"#FFFFFF60" or "rgba(255, 255, 255, 0.6)"</p></td></tr><tr><td>Grid lines vertical</td><td>Boolean</td><td>Expression</td><td>Display vertical lines on the grid.</td></tr><tr><td>Grid lines horizontal</td><td>Boolean</td><td>Expression</td><td>Display horizontal lines on the grid.</td></tr><tr><td>Grid lines color</td><td>Text</td><td>Expression</td><td><p>Change color of the lines on the grid.</p><p>Example:</p><p>"#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)"</p></td></tr><tr><td>Prefix</td><td>Text</td><td>Expression</td><td>Display a prefix for values on tooltip.</td></tr><tr><td>Postfix</td><td>Text</td><td>Expression</td><td>Display a postfix for values on tooltip.</td></tr><tr><td>Show animation</td><td>Boolean</td><td>Expression</td><td>Display animation on render.</td></tr><tr><td>Height</td><td>Number</td><td>Expression</td><td><p>Set height of the chart.</p><p>Type number.</p></td></tr><tr><td>Width</td><td>Number</td><td>Expression</td><td><p>Set width of the chart.</p><p>Type number.</p></td></tr></tbody></table>