Menu

Candlestick Chart

In this tutorial, you’ll learn how to draw a Candlestick Chart in Glimpse. A Candlestick chart is used to visualize price movements over time. It displays multiple bits of price information such as the open price, close price, highest price and lowest price through the use of candlestick-like symbols.

Start by adding data into Glimpse from one of our JSON files. From the top menu, go to Data > Sample Data > ohlc.json. You’ll see a number of Data Fields in the left-side Outline panel.

Now, go to the Inspector panel to the right side of the UI and go to Visual > Mark. Then, set the Mark Type to Bar. Your canvas will turn blue.

image1


From the Outline panel, drag the field date into the X encoding. Next, in the Inspector panel, in the Measure dropdown, change the measure type from Nominal to Temporal.

Expand the Time Unit section and check the Month and Date options. Finally, switch the Title toggle off.

image2


Go back to the Outline panel and drag the open field into the Y encoding and close into the Y2 encoding. Also, deactivate Title.

image3


To reduce the amount of empty space on the graph, select open in the Y encoding channel. Then, in the and in the Inspector panel go to Visual > Encoding. Expand the Scale section, open Domain and uncheck the Include Zero option.

image4


To set the color of the bars, you’ll need to create a Calculate data transform. From the top menu go to Insert > Transform > Calculate. In the Inspector panel, enter the following data: “Bar Coloring” in the Title, “bar_color” in the Output, in 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. The bars will automatically change colors to the default colors assigned to them in the scale. Please note that these are not the colors that match their HEX codes.

image6


To get the colors that match the HEX numbers, green and red, switch off the Scale toggle in the Inspector panel.

image7


Then go to Visual > Mark > Size and enter 3 pt for Size.

image8


To create the candlestick “wicks”, create a new Bar layer. From the top menu, go to Insert > Layer > Bar from the top menu.

image9


Then, right-click on the new Barlayer in the Outline panel, and choose Send to Back.

image10


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

image11


Drag the fields low into the Y encoding and high into the Y2 encoding.

image12


To reduce the width of the bars, in the Inspector panel go Visual > Mark > Size and enter 1 pt for the Size.

image13


Finally, expand the Color section, click on Fill and change the color to black in the color picker.

image14


Done! This is how you draw a Candlestick Chart. If you want to further customize your chart, please read the documentation.