How to create a

Line Chart.

Learn how to create an embeddable, interactive line chart with Datawrapper in minutes.

What You'll Learn


1.

Getting your data into Datawrapper

Learn how to import your tables, CSVs or other spreadsheet data into Datawrapper.

2.

Creating your Line Chart

Find out how to create your line chart in your Datawrapper account.

3.

Publishing & Embedding it

Embed your line chart directly into your website as an iFrame.

Importing the data

Click here to create a new chart with DatawrapperThe first step is pasting your data. You can copy & paste data from Excel or the web, or upload your own CSV files. For example, here is the dataset that powers the chart of Apple's sales above the line:

[["","iPhone","iPad","Mac","iPod"],["Q3 2000","","","1,1",""],["Q4 2000","","","0,6",""],["Q1 2001","","","0,7",""],["Q2 2001","","","0,8",""],["Q3 2001","","","0,8",""],["Q4 2001","","","0,7",""],["Q1 2002","","","0,8",""],["Q2 2002","","","0,8",""],["Q3 2002","","","0,7",""],["Q4 2002","","","0,7",""],["Q1 2003","","","0,7",""],["Q2 2003","","","0,8",""],["Q3 2003","","","0,8","0,3"],["Q4 2003","","","0,8","0,7"],["Q1 2004","","","0,7","0,8"],["Q2 2004","","","0,9","0,9"],["Q3 2004","","","0,8","2"],["Q4 2004","","","1","4,6"],["Q1 2005","","","1,1","5,3"],["Q2 2005","","","1,2","6,2"],["Q3 2005","","","1,2","6,4"],["Q4 2005","","","1,3","14"],["Q1 2006","","","1,1","8,5"],["Q2 2006","","","1,3","8,1"],["Q3 2006","","","1,6","8,7"],["Q4 2006","","","1,6","21"],["Q1 2007","","","1,5","10,5"],["Q2 2007","","","1,7","9,9"],["Q3 2007","1,1","","2,2","10,2"],["Q4 2007","2,3","","2,3","22,1"],["Q1 2008","1,7","","2,3","10,6"],["Q2 2008","0,7","","2,5","11"],["Q3 2008","6,9","","2,6","11"],["Q4 2008","4,4","","2,5","22,7"],["Q1 2009","3,8","","2,2","11"],["Q2 2009","5,2","","2,6","10,2"],["Q3 2009","7,4","","3","10,2"],["Q4 2009","8,7","","3,4","20,1"],["Q1 2010","8,7","","2,9","10,9"],["Q2 2010","8,4","3,3","3,5","9,4"],["Q3 2010","14,1","4,2","3,9","9"],["Q4 2010","16,2","7,3","4,1","19,4"],["Q1 2011","18,7","4,7","3,8","9"],["Q2 2011","20,3","9,2","3,9","7,5"],["Q3 2011","17,1","11,1","4,9","6,6"],["Q4 2011","37","15,4","5,2","15,4"],["Q1 2012","35,1","11,8","4","7,7"],["Q2 2012","26","17","4","6,7"],["Q3 2012","26,9","14","4,9","5,3"],["Q4 2012","47,8","22,9","4","12,7"],["Q1 2013","37,4","19,5","4","5,6"],["Q2 2013","31,2","14,6","3,8","4,6"],["Q3 2013","33,8","14","4,6","3,5"],["Q4 2013","51","26","4,8","6"],["Q1 2014","43,7","16,3","4,1","2,8"],["Q2 2014","35,2","13,3","4,4","2,9"],["Q3 2014","39,3","12,3","5,5","2,6"],["Q4 2014","74,5","21,4","5,2",""]]

You can copy & paste this dataset into Datawrapper and click Upload and continueIn step 2, we can check whether the data looks as expected. Everything looks good here, so let’s move to step 3. 

Creating your chart

Datawrapper automatically created a bar chart with the data we just pasted in. This is nice, but a line chart is the better choice here. Click on Line Chart in the Chart Type-section to change it. That looks a lot better!

It’s really amazing to see how successful the iPhone has been in the past five years.

In the Refine tab, we can customize our chart even more. For example, let’s enable Direct Labeling so the labels appear right next to the lines. Also, let’s make the lines slightly curved, so the changes don’t appear as sharp as they do now:

Nice! In the Annotate tab, we can give this chart a title. How about „How The iPhone Shaped Apple“. We can also highlight specific elements - let’s highlight the line with the iPhone sales!

The changes you make on the left side automatically appear in your chart on the right.

The created chart

This is the line chart we just created:

You can hover over it to see the individual data points.

How to publish it

Embedding charts into your website is super easy. If you use Datawrapper for free, you can download the chart as a ZIP file and host it on your own website yourself.

When you upgraded to Datawrapper single, you see a range of publishing options for your chart:

You can download the chart as a static image, but the best way to use a Datawrapper chart is by embedding it directly into your website. To do so, click on Export for embedding. Datawrapper automatically generates an iFrame-embed code that you can copy & paste directly into your CMS.

Copy the embed code into your website and you're done!

Other Interesting Tutorials

How to create a Stacked Column Chart

Learn how to create a stacked column chart in minutes with Datawrapper.

View Guide

All-new line charts

Datawrapper has completely revamped line charts: More responsive, cleaner and with annotations.

View Guide