Menu

OHLC Chart

In this tutorial, we’ll demonstrate how to draw an Open-High-Low-Close Chart (or OHLC Chart) in Glimpse, which is a chart used to visualize price movements over time. A OHLC Chart displays multiple bits of price information such as the open price, close price, highest price and lowest price.

First, add in the data by going Data > Sample Data > ohlc.json from the top menu.

Then, under Visual > Mark in the Inspector panel, set the Mark Type to Rule.

image1


Drag the field date into the X encoding. After, in the Inspector panel, change the Measure type to Temporal and under Visual > Encoding > Time Unit tick Month and Date. Also, deactivate Title.

image2


Next, drag the fields high into the Y encoding and low into the Y2 encoding. Also, deactivate Title.

image3


To reduce the amount of empty space on the graph, press high in Y and in the Inspector panel go Visual > Encoding > Scale > Domain untick Include Zero.

image4


To set the color of the bars, a Calculate data transform needs to be created. On the top menu go Insert > Transform > Calculate. In the Inspector panel, enter “Bar Coloring” for the Title, “bar_color” for the Output, and for Calculate enter:

datum.open < datum.close ? '#06982d' : '#ae1325'

Then enable the transform to activate it.

image5


Now that the bar_color token has been created, drag it into the Color encoding.

image6


Deactive Scale in the Inspector panel so that the correct colors appear.

image7


To thicken the marks, go Visual > Mark > Size and enter 2 pt for Size.

image8


Now to create the ‘open’ and ‘close’ ticks, create a new layer by going Insert > Layer > Tick from the top menu.

image9


Drag the field date into the X encoding. After, in the Inspector panel, change the Measure type to Temporal and under Visual > Encoding > Time Unit tick Month and Date.

image10


After, drag the field open into the Y encoding.

image11


Then, drag the bar_color token into the Color encoding and in the Inspector panel deactivate Scale.

image11


In Visual > Mark > Size set the Width to 10 pt.

image12


To adjust the position of the ticks, go Position and enter -3 pt in the X Offset.

image13


To make the ticks more visible, go Stroke and enter 4 pt for the Thickness.

image14


After, go under Color and set the Opacity to 100%.

image15


To create the ‘close’ tick, right-click or ctrl-click the Tick layer under Layers in the Outline and select Duplicate Selection from the menu.

image17


This will create a duplicate Tick layer:

image18


Now, move the field close into the Y encoding (replacing open).

image19


Then, change the position by go Visual > Mark > Position and enter 3 pt in the X Offset.

image20


This concludes this tutorial on drawing a OHLC Chart. If you want to further customize your chart, please read the documentation.