Customizing your line chart

After uploading your data, you have several options to improve your line chart by customizing it. This article explains how to create the following chart, covering all customization options in the process:

Index

Refine » Horizontal axis

Under step 3: Visualize, you'll see three tabs: Refine, Annotate, and Layout. Let's start with the options in the Refine tab.

The top panel lets you configure the horizontal axis (also called x axis). By default, the column in your data that has the time data (dates, years, time stamps, etc.) is selected. If you've uploaded multiple ones, you can also select the correct column with the first setting, Select column. We choose the column "Date".

Here's what else you can change about the horizontal axis:

Custom range: Maybe you want to show another time range other than the one you see. You can extend your time range (which will result in white space) or limit it (for example, instead of showing data starting in 2009, you can start in 2015):

Custom ticks: Here you can decide which ticks you want to see. If you type in "2015, 2020, 2021", only these three axis labels will appear on the horizontal axis.

Date format: By default, Datawrapper tries to guess which date format could work best for your data – in our case, that's why years show up. Here's an overview of all date formats Datawrapper can display.

Grid: Would you rather show lines running from the top to the bottom of your chart, ticks (= short lines below the axis), or no grid at all? Here you can decide.

Refine » Vertical axis

The settings for the vertical axis are very similar to the one in horizontal axis, though there are some additional features. Here's a brief description of each of these features:

Scale type: By default, your line chart will always appear on a linear scale, where the difference between 1 and 2 is as big as the difference between 100 and 101 and 1000 and 1001. However, if you have important differences in your small numbers and large differences in your big numbers, a logarithmic scale might be the better alternative. If you choose it, the difference between 1 and 10 will become as big as between 0.1 and 1 and 1000 and 10,000. Learn more about logarithmic scales on our blog.

Custom range and Custom ticks do the same as they do on the horizontal axis (see above). As with every setting, Datawrapper tries to set good default values – in our case, we want to change the max range to 70.

Number format: Here we can decide how we want our numbers to appear on the axis. Here are three examples:

"123.4k" works great for big numbers like "1,303,428" that you'd rather want to display as "1.3m"
"0%" or "0.0%" will add a percentage sign. Because our values are shares, we do so.
"0.0" works great for detailed numbers like "0.1922302", then you'd rather want to display as "0.2"

You can learn about all available number formats here.

Grid: Would you rather show lines running from the left to the right of the chart, ticks (= short lines below the axis), or no grid at all? Here you can decide.

Labels: Should the labels be outside of your grid, inside (= on top of the grid lines) or should that change depending on the available space ("automatic"?). You can also decide if the grid labels should stand on the left or right of the chart (which is helpful if your most interesting values are on the right).

Refine » Customize line

These two panels let you customize the style of your lines: the color, width, their labels, and more. They're some of the most important settings when it comes to crafting out the story you want to tell with your chart.

If you uploaded only one numeric column – and hence have a line chart with only one line –, you'll see the following:

If you upload multiple numeric values (and therefore lines), you'll get a few less options in a panel called Lines, but you'll be able to customize each line individually. First, let's cover these basic settings:

Color lets you choose the color of the line (Base color, if you uploaded multiple lines, lets you choose the color in which shades all lines will appear in). To change the color, click on it, then select the color you want, enter a HEX code, or change some color parameters. Learn more about our color picker here.

Show outline adds a very fine stroke around your line in the color of the chart background. This makes it easy to distinguish between lines if they overlap a lot:

Interpolation allows you to control how the lines are connected between the data points. To read more about when to choosewhich interpolation, visit our blog post.

Width and Dash allow you to define exactly that: How thick your line should be, and if it should be dashed. If you click on the last Width option, you can make your line disappear.

Refine » Customize line » Label(s)

To decide where our labels should sit, Datawrapper gives you a few options: You can show them as a legend (meaning, as a color key) on the top of the chart:

Or you can let Datawrapper label the lines directly ( Right). If you do so, you can also decide to show connector lines or use the line color for the labels:

With connector lines

Without connector lines, but uses line color

If you don't need labels because you mention what your chart shows in the title or in an annotation, you can also decide to not show them ( None).

If you only uploaded one label, you'll also find the option to rename it – for example, because the data you uploaded includes a rather complicated name for your line, and you want to simplify it.

Refine » Customize line » Show value labels

Apropos labels: You can also show labels close to your line that tell readers which numeric values your line(s) show:

To do so, turn on Show value labels. Now you can customize the number format, decide if you want to label all first or last values of a line, decide how many value labels should be visible per line, add little circles to the lines that make clearer which data points are labeled (Outline labeled data points), or use the line color for the value labels. You can learn more about value labels in line charts on our blog.

Refine » Customize line » Show line symbols

The next option you have is to add little circles/triangles/squares etc. to your lines to highlight each data point, or just the beginning and/or end of each line:

You can decide on

the kind of symbol (circle, square, diamond, triangle, cross, hexagon, star, or wye)
if the symbols should show up on the first and/or last, or on all data points. (Showing them on all data points only makes sense if you have few data points per line.)
the style: filled ● or hollow ○
the size (how big should the circles be?)
and their opacity (how transparent should they be?)

Refine » Customize lines individually

If you upload multiple lines, you'll find options to Customize lines directly below the Lines options:

The options will look familiar. Here, too, you can rename the line label, change the color, width, dash, and interpolation of the line, decide if you want to show your line label in the legend or next to it, show value labels and line labels – but you can do so for each line individually.

To customize one line, simplyclick on it in the list. You can also use the buttons All, None, and Invert (your selection) below the list to make changes to all lines, or to all other lines.

You can also use Shift and Cmd/Ctrl to selec multiple lines and make changes to them:

The combination of color and width can be a powerful storytelling tool: In our line chart at the top, you'll see that the gray lines reside in the background because of their, well, grayness – but also because their thinner than the blue and red line:

Refine » Add area fills

Below the Lines panel, you'll find the option to fill areas. If you click on Add area fill, you get the following options:

From...To lets you choose two lines between which you want to add the area fill. Note that this could also be the zero baseline: If your chart only shows one line, you can still add an area fill between that line and zero.
Color and Opacity let you define the style of your area fill. If you check Use different color for negative differences, you can give negative differences another fill. In our case, that means that we can change the color of the area fill once Chrome overtook the Internet Explorer.
Interpolation allows you to decide the type of connection between the data points (see above). This should be the same interpolation as the one you chose for your lines.

Refine » Tooltips

By default, your line chart will show tooltips: If you or your readers hover over a line in your chart, they will see the underlying values.

In the Tooltips panel, you can turn that behavior off, and decide on the date format and number format of your tooltips:

Refine » Appearance (setting the height and margin)

In the last panel of the Refine tab, you can decide on the height and the size of the margin of your chart.

You can set a fixed plot height, or one based on width that scales with the width of your chart. To learn more about the concept of chart resizing and the difference between fixed and width-based plot height, visit this Academy article.

The last option allows you to set the size of your label margin - that is, how much space you want to reserve for your labels. Note that on mobile screens, that margin gets ignored, and all line labels move into a color legend at the top.

These are all the options in the Refine tab. To proceed to the Annotate top, click on Proceed at the bottom of the page, or on Annotate at the top:

Annotate

In the Annotate tab, you're first asked to give your visualization a title, description, notes, source, byline, and an alternative description for screen readers. You can find a detailed explanation of all these Annotate options here.

Annotate » Text annotations

Text annotations in Datawrapper let you set text everywhere on your chart. You can type text into the text field and then place it with the little arrow that's left of the text field directly on the chart:

If you'd like to learn more about this feature and how to precisely set and format annotations, visit this article.

Annotate » Highlight range

If you want to draw your readers' attention to one specific time or value range in our chart, highlighting a range is perfect. It allows you to set grayed-out ranges directly in our chart. To do so, click on Add range highlight. Now select a starting and ending point of the range by clicking in the chart. If you want, you can also change the start and end position by entering values:

Here's what else you can do:

Orientation lets you choose if your highlight range should cover a vertical or a horizontal range.
Type allows you to choose between a range and a line. If you choose a line, you can only enter one value in the position field.
Color and Opacity allow you to change the styling of your range/line highlight. In most cases, a desaturated color with a very low opacity is recommend.

These are all the options in the Annotate tab. To continue to the Layout options, click on Proceed at the bottom of the page, or on Layout at the top:

Layout

In the Layout tab, you can select an output locale, change the design theme and footer options, and enable social sharing. Find a detailed explanation of all the Layout options here.

Now that you refined, annotated, and changed the design of your chart in the Layout tab, it's time to publish:

Publish

In this last step, you can publish your work and decide how to share it with the world. To do so, click the big blue button that says Publish now (learn more about publishing and unpublishing visualizations in this article):

Now, you have a few options:

You can

share and embed your visualization, e.g. on your website.
allow other people to reuse your visualization by adding it to the Datawrapper River
download your visualization as a PNG, PDF, or SVG.

And that's it! Congratulations to creating, customizing, and publishing your first line chart. If you still have open questions, don't hesitate to get in touch at support@datawrapper.de.