Show Sidebar Hide Sidebar

Area Charts

A line chart that displays quantitative data using colored areas between the axis and line(s)

Step 1

Try an Example

Before getting started with your own dataset, you can check out an example. First, select the 'Type' menu. Hovering the mouse over the chart type icon will display three options: 1) Charts like this by Plotly users, 2) View tutorials on this chart type, and, 3) See a basic example.

Clicking the 'See a basic example' option will show what a sample chart looks like after adding data and editing with the style. You'll also see what labels and style attributes were selected for this specific chart, 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 your workspace.

Step 2

Add Your Data to Plotly

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

Step 3

Create a Chart

After adding data, go to the 'Traces' section under the 'Structure' menu on the left-hand side. Choose the 'Type' of trace, then choose 'Area' under 'Simple' chart type.

Choose chart main

Next, select the 'X' and 'Y' values from the dropdown menus. This will create an area trace, as seen below.

Add X and Y

To add more traces to the plot, click on '+ Trace' button at the top right corner of the panel in the 'Traces' section under the 'Structure' menu.

Trace open

Add as many traces as needed, until the plot is complete!

Step 4

Style a Chart

The 'Style' menu displays many options to modify characteristics of the overall chart layout or the individual traces. To see more options about styling the chart, visit the style and layout section of the Chart Studio documentation.

Use the 'Traces' section under the 'Style' menu to change the properties of the traces, such as area color fill, markers, or line attributes.

Area properties

To set the trace names, type the name in the textbox provided under 'Name' property for each trace. Note that updating the trace name will update the legends as well.

Trace Name

To display/remove the lines on top of the filled-area, click the checkbox corresponding to 'Lines' under the 'Display' option.

Display Lines

Similarly, to display the markers along the filled area's line, click the checkbox corresponding to 'Points' under the 'Display' option. Use the color palletes to change the color of each individual component of the traces, as seen below.

Colour main

Use the 'General' section under the 'Style' menu to change the layout background and margin color, set the plot title, and change the font styles.

Area properties

To set the plot title, type in the textbox provided under the attribute 'Title'.

Plot Title

Another approach is to click and then enter the title directly on the plot interface. The same can be done for the axes title and the legends.

Type directly title

Step 5

Save and Share

To save the plot, click the 'Save' button on the left-hand side. A save modal will appear, as seen below, where you can specify the filenames and privacy settings for your plot and data grid.

Save main

For more information on privacy settings and how sharing works, visit Plotly's sharing tutorial.

Still need help?
Contact Us

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