Show Sidebar Hide Sidebar

How to Make a 2D Histogram Contour Plot in Chart Studio

Create a plot that visualizes a bivariate distribution with contour lines.

Step 1

Try an Example

This 2 dimensional histogram compares distributions across two variables in a contour plot fashion and the distribution is depicted by a colorscale.

After selecting '2D Histogram Contour Plot' under 'Chart Type', you can check out an example before adding your own data. Clicking the 'try an example' button will show what a sample chart looks like after adding data and playing with the style. You'll also see what values and style attributes were selected for this specific plot, as well as the end result.

Example after

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

Open data

Step 2

Add Your Data to Plotly

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.

Import data main

Step 3

Create a Chart

After adding your own data, choose your 'Chart Type' in the GRAPH section on the left-hand side and select '2D Histogram Contour Plot'.

Choose chart main

Click on GRAPH on the left-hand side to add your data to your plot. After selecting '2D Histogram Contour Plot', you should then fill out the X and Y dropdown to create the plot.

Adding axes

This will create a raw 2D histogram contour plot, as seen below.

Raw plot

Step 4

Style a Chart

Now it's time to choose the color, text position or typeface. Click on STYLE on the left-hand side to play around with the style of your plot.

To change the colorscale, click on ‘Traces’ under the same STYLE tab, and choose the colorscale you want, with the added option of reversing the colorscale. Note that certain colors and typeface are only available with a PRO subscription. Click here to upgrade!

Colour main

You can also show or hide your contour lines, and choose the type, thickness, color and numbers of lines. This is also where you select the colorscale range, as well as the x and y binning as auto or custom, play with the max bins, and show or hide your color bar.

Colour styling

To add a title to your graph, you can type it directly on the title by double-clicking it.

Type directly title

The same can be done for the axis labels and legend. As you can see int he image below, we've used latex for our x-axis label. If you want to learn more about this cool typesetting system, click here.

Type directly axes

We've also added an annotation for our y-axis label by going to 'Notes' and clicking on the blue '+Annotation' button, then selecting 'General Annotation'. For more information on annotations, visit this page.


Another option is to visit the 'Layout' section under STYLE, click on 'Title and Fonts' and enter your title in the box, as shown below.

Type in layout panel

Step 5

Save and Share

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

Save main

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

Save pop-up

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.