> Markdown version of [OHLC & Candlestick](https://vaadin.com/docs/next/components/charts/charttypes/ohlc-and-candlestick). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# <a id="charts.charttypes.ohlc"></a>OHLC & Candlestick Charts

<!-- vale Vaadin.Wordiness = NO -->

An Open-High-Low-Close (OHLC) chart displays the change in price over a period of time. The OHLC charts have chart type `OHLC`. An OHLC chart consists of vertical lines, each having a horizontal tick mark both on the left and the right side. The top and bottom ends of the vertical line show the highest and lowest prices during the time period. The tick mark on the left side of the vertical line shows the opening price, and the tick mark on the right side the closing price.

<!-- vale Vaadin.Wordiness = YES -->

[Image: charts ohlc]

OHLC Chart.

A candlestick chart is another way to visualize OHLC data. A candlestick has a body and two vertical lines, called *wicks*. The body represents the opening and closing prices. If the body is filled, the top edge of the body shows the opening price, and the bottom edge shows the closing price. If the body is unfilled, the top edge shows the closing price and the bottom edge the opening price. In other words, if the body is filled, the opening price is higher than the closing price, and if not, lower. The upper wick represents the highest price during the time period, and the lower wick represents the lowest price. A candlestick chart has chart type `CANDLESTICK`.

[Image: charts candlestick]

Candlestick Chart.

To attach data to an OHLC or a candlestick chart, you need to use a `DataSeries` or a `ContainerSeries`. See ["Chart Data"](https://vaadin.com/docs/next/components/charts/data.md#charts.data) for more details.

A data series for an OHLC chart must contain `OhlcItem` objects. An `OhlcItem` contains a date and the open, highest, lowest, and close price on that date.

```java
Chart chart = new Chart(ChartType.OHLC);
chart.setTimeline(true);

Configuration configuration = chart.getConfiguration();
configuration.getTitle().setText("AAPL Stock Price");
DataSeries dataSeries = new DataSeries();
for (StockPrices.OhlcData data : StockPrices.fetchAaplOhlcPrice()) {
    OhlcItem item = new OhlcItem();
    item.setX(data.getDate());
    item.setLow(data.getLow());
    item.setHigh(data.getHigh());
    item.setClose(data.getClose());
    item.setOpen(data.getOpen());
    dataSeries.add(item);
}
configuration.setSeries(dataSeries);
chart.drawChart();
```

When using `DataProviderSeries`, you need to specify the functions used to retrieve OHLC properties: `setX()`, `setOpen()`; `setHigh()` `setLow()`; and `setClose()`.

```java
Chart chart = new Chart(ChartType.OHLC);
Configuration configuration = chart.getConfiguration();

// Create a DataProvider filled with stock price data
DataProvider<OhlcData, ?> dataProvider = initDataProvider();
// Wrap the container in a data series
DataProviderSeries<OhlcData> dataSeries = new DataProviderSeries<>(dataProvider);
dataSeries.setX(OhlcData::getDate);
dataSeries.setLow(OhlcData::getLow);
dataSeries.setHigh(OhlcData::getHigh);
dataSeries.setClose(OhlcData::getClose);
dataSeries.setOpen(OhlcData::getOpen);

PlotOptionsOhlc plotOptionsOhlc = new PlotOptionsOhlc();
plotOptionsOhlc.setTurboThreshold(0);
dataSeries.setPlotOptions(plotOptionsOhlc);

configuration.setSeries(dataSeries);
```

Typically, OHLC and candlestick charts contain a lot of data, so it’s useful to use them with the timeline feature enabled. The timeline feature is described in ["Timeline"](https://vaadin.com/docs/next/components/charts/timeline.md#charts.timeline).

## <a id="charts.charttypes.ohlc.plotoptions"></a>Plot Options

You can use a `DataGrouping` object to configure data grouping properties. You set it in the plot options with `setDataGrouping()`. If the data points in a series are so dense that the spacing between two or more points is less than the value of the `groupPixelWidth` property in the `DataGrouping`, the points are grouped into appropriate groups so that each group is around two pixels wide.

The `approximation` property in `DataGrouping` specifies which data point value should represent the group. The possible values are: `average`, `open`, `high`, `low`, `close`, and `sum`.

Using `setUpColor()` and `setUpLineColor()` allows you to set the fill and border colors of the candlestick that show a rise in the values. The default colors are white.

## <a id="ohlc-example"></a>OHLC Example

**Flow** — `ChartTypeOhlc.java`

```java
Chart chart = new Chart(ChartType.OHLC);

Configuration configuration = chart.getConfiguration();
configuration.getTitle().setText("AAPL Stock Price");

DataSeries dataSeries = new DataSeries();
PlotOptionsOhlc plotOptionsOhlc = new PlotOptionsOhlc();
DataGrouping grouping = new DataGrouping();
grouping.addUnit(new TimeUnitMultiples(TimeUnit.WEEK, 1));
grouping.addUnit(new TimeUnitMultiples(TimeUnit.MONTH, 1, 2, 3, 4, 6));
plotOptionsOhlc.setDataGrouping(grouping);
dataSeries.setPlotOptions(plotOptionsOhlc);
for (Number[] data : getRawData()) {
    OhlcItem item = new OhlcItem();
    item.setX(data[0]);
    item.setLow(data[1]);
    item.setHigh(data[2]);
    item.setClose(data[3]);
    item.setOpen(data[4]);
    dataSeries.add(item);
}
configuration.setSeries(dataSeries);

RangeSelector rangeSelector = new RangeSelector();
rangeSelector.setSelected(1);
configuration.setRangeSelector(rangeSelector);

chart.setTimeline(true);
```

## <a id="candlestick-example"></a>Candlestick Example

**Flow** — `ChartTypeCandlestick.java`

```java
Chart chart = new Chart(ChartType.CANDLESTICK);

Configuration configuration = chart.getConfiguration();
configuration.getTitle().setText("AAPL Stock Price");

DataSeries dataSeries = new DataSeries();

PlotOptionsCandlestick plotOptionsCandlestick = new PlotOptionsCandlestick();
DataGrouping grouping = new DataGrouping();
grouping.addUnit(new TimeUnitMultiples(TimeUnit.WEEK, 1));
grouping.addUnit(new TimeUnitMultiples(TimeUnit.MONTH, 1, 2, 3, 4, 6));
plotOptionsCandlestick.setDataGrouping(grouping);
dataSeries.setPlotOptions(plotOptionsCandlestick);
for (Number[] data : getRawData()) {
    OhlcItem item = new OhlcItem();
    item.setX(data[0]);
    item.setLow(data[1]);
    item.setHigh(data[2]);
    item.setClose(data[3]);
    item.setOpen(data[4]);
    dataSeries.add(item);
}
configuration.setSeries(dataSeries);

RangeSelector rangeSelector = new RangeSelector();
rangeSelector.setSelected(1);
configuration.setRangeSelector(rangeSelector);

chart.setTimeline(true);
```