Show Sidebar Hide Sidebar

How to Make an Area Chart in Chart Studio

Create a type of line chart that displays different colors in the areas below the lines.

Step 1

Try an Example

With this type of chart, the area between the x-axis and lines are commonly emphasized with colors, shading, and/or textures.

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.

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 'Area Chart'.

Click on GRAPH on the left-hand side to add your axes to your plot. Select 'Area chart' then fill out the X and Y dropdown menus to create the plot.

Adding axes

This will create a raw area chart, as seen below.

Raw plot

For charts that have many values such as this one, we need to add more data to the plot. We do this by clicking on the '+Trace' button at the top right-hand side of that pane.

Trace open

You can add as many traces as you need, until your plot is complete!

All traces

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 fill color, click on ‘Traces’ under the same STYLE tab, and choose the color you want. Note that certain colors and typeface are only available with a PRO subscription. Click here to upgrade!

Colour main

Not only can you play with the color, but you can also add points to your lines and color those as well. You can change the diameter of the point, and if the dot doesn't do it for you, you can choose another symbol. You also have the option of selecting the type and shape of line and adjusting its thickness.

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.

Type directly legend

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

We've also added a source by going to 'Notes' and clicking on the blue '+Annotation' button, then selecting 'Source to data'. For more information on annotations, visit this page.

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.