OHLC Charts in Chart Studio

Try an Example

You can use the data featured in this tutorial by clicking on 'Open This Data in Plotly' on the left-hand side. It'll open in your workspace.

Step 2

Add Data

Head to Plotly’s new online workspace and add your data. You have the option of typing directly in the grid, uploading your file, or entering a URL of an online dataset. Plotly accepts .xls, .xlsx, or .csv files. For more information on how to enter your data, see this tutorial.

For this tutorial, we have decided to upload the data via a URL. More specifically, the Apple stock activity dataset from GitHub.

Step 3

Create Chart

After adding your own data, go to GRAPH on the left-hand side, then 'Create'. Click 'Chart Type', then choose 'OHLC Chart' in the 'Financial' column.

On the left-hand side, in the trace panel, you can assign each variable. You should then fill out the X, Open, High, Low, and Close dropdown to create the plot.

Step 4

Style

Chart Studio allows you to style the traces, layout, annotations, axes, legend, and more. To start customizing, click on STYLE on the left-hand side.

To change the line color, fill color, or line thickness for either increasing or decreasing values, click on ‘Traces’ under the STYLE tab. Note that certain colors and typeface are only available with a PRO subscription. Click here to upgrade!

To add or change the title, simply click the title on the plot and an editable text box will appear. Alternatively, you can select ‘Layout’ under the STYLE tab and then select ‘Title and Fonts’. Here, you ought to see a text box where you can add, or edit, the title. Additionally, you can customise the text by changing the typeface, size, color, or write in HTML or even LaTeX.

In Chart Studio you can customise the legend’s text, position, orientation, color, and visibility. For this tutorial we will edit the text, change the orientation, and legend position. Again, under the STYLE tab select ‘Legend’, which will then open the legend panel. Here, we will change the orientation and position in 3 stages. (1) Under the title orientation click the ‘Horizontal’ button; (2) Below the title 'Positioning' enter the 'X Position' as 0.5 and the 'Y Position' as 1; (3) Click the setting icon located next the title 'Positioning' and select ‘Center’ to set the x position coordinate as the center of the legend text. Lastly, to edit the text, simply click the legend text in the plot and an editable text box will appear (similar to editing the plot title).

The next few features are somewhat unique to financial charts. You have the option of using either, both, or neither.

Like previously, under the STYLE tab select ‘Axes, which will open multiple panel options; then ‘Range Slider’. Here you have the option toggle visibility, make adjustments to height, border width, and background or border color. For this tutorial, we have left all setting to default.

It is also important to note, that you can control the range slider by simply clicking and dragging the cursor from either end.

The second feature is Timescale Buttons – buttons that can be clicked and update the plot to specific date range. Similar to ‘Range Selector’, ‘Timescale Buttons’ can be found in the ‘Axes’ option under the STYLE tab. In the ‘Timescale Buttons’ panel click the blue ‘+ Button’ to add a timescale button. Here, you have the option to toggle visibility, make adjustments to height, border width, and background or border color. More importantly, in the top box inside the panel you can set the label, customise the step (i.e. month etc.), count (how many months, years, etc.), and the stepmode (backward etc.). For this tutorial, we have selected one month backward from the most recent date. Also note, that a reset button is added by default.

Step 5

Save and Share

Your chart is now done! Click SAVE on the left-hand side.

After giving your file a name, select your PLOT and DATA as 'Public' or 'Private'. For more information on how sharing works, including the difference between private, public and secret sharing, visit this page.