# Candlestick, High-Low-Close, and High-Low-Open-Close Plots

Learn how to configure financial charts with ActiveReportsJS.

## Content

The `Candlestick`, `High-Low-Close`, and `High-Low-Open-Close` plots are suitable to show price movements of a currency or other assets over time. These plots arrange time along the horizontal axis and encode data values into shapes representing the high, low, open, and close prices.

## Candlestick

A `Candlestick` plot encodes price points using rectangles that indicate the open and the close values. If the open value is greater than the close value, then the rectangle is filled with the background color. The high and low values are shown by vertical lines projecting from the top and bottom of a rectangle. For instance, the [Candlestick Demo](https://developer.mescius.com/activereportsjs/demos/Reports/CandlestickPlot/purejs) shows movement of the stock price for a virtual company.

![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/Chart/CandlestickExample.png)

## High-Low-Close

A `High-Low-Close` plot encodes price points using lines with a marker. The marker indicates the closing value. The upper and the lower ends of the line indicate the high and low values, respectively. For instance, the [High-Low-Close Demo](https://developer.mescius.com/activereportsjs/demos/Reports/HighLowClosePlot/purejs) shows movement of stock price for a virtual company.

![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/Chart/HighLowCloseExample.png)

## High-Low-Open-Close

A `High-Low-Open-Close` plot encodes price points using lines with two markers. The marker on the left side of a line indicates the open value, the marker on the right side - close value. The upper and the lower ends of the line indicate the high and low values, respectively. For instance, the [High-Low-Open-Close Demo](https://developer.mescius.com/activereportsjs/demos/Reports/HighLowOpenClosePlot/purejs) shows movement of the stock price for a virtual company.

![](https://cdn.mescius.io/document-site-files/images/e637becb-8cbc-4561-bac1-84462097b057/reportauthor-guide/Chart/HighLowOpenCloseExample.png)

You can use the following demos to explore plot properties - open a link, toggle the [Report explorer](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#report-explorer), select the `Plot - Plot 1` node and use the [Properties panel](/activereportsjs/docs/v6.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel) to modify the configuration.

* [Candlestick Demo](https://developer.mescius.com/activereportsjs/demos/Reports/CandlestickPlot/purejs)
* [High-Low-Close Demo](https://developer.mescius.com/activereportsjs/demos/Reports/HighLowClosePlot/purejs)
* [High-Low-Open-Close Demo](https://developer.mescius.com/activereportsjs/demos/Reports/HighLowOpenClosePlot/purejs)

You could also download the report files listed below and open them in the [Standalone Report Designer](/activereportsjs/docs/v6.1/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App).

* [Candlestick report](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/CandlestickPlot/purejs/candlestick.rdlx-json)
* [High-Low-Close report](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/HighLowClosePlot/purejs/high-low-close.rdlx-json)
* [High-Low-Open-Close report](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/HighLowOpenClosePlot/purejs/high-low-open-close.rdlx-json)