Sample CSV
| Year | Wind and solar | Coal |
|---|---|---|
| 2010 | 2.3 | 44.8 |
| 2011 | 3.0 | 42.1 |
| 2012 | 3.6 | 37.4 |
| 2013 | 4.3 | 38.9 |
| 2014 | 5.0 | 38.5 |
How to Create a Draw the Line Chart
A step by step walkthrough for building a line chart that asks readers to draw the rest of the trend, then reveals the real line with a score, in PlotSet.
About 7 minutesA line chart that stops partway and lets the reader draw the rest is what you will have. When they submit, the real line is revealed and their guess is scored.
Expect about seven minutes. Most of it goes on choosing where the line stops and writing the feedback.
The data you need
A first column for the x axis, such as years, then one column per line. Some columns are guessed by the reader, and others can stay fixed as context.
The x column can be text, numbers or dates, with one row per point.
Each guessed column becomes a line the reader has to draw. Fixed columns are always drawn in full.
At least one row must remain after the drawing point, or the chart becomes a plain finished line chart.
All lines share one vertical axis, so keep them on a similar scale.
The steps
The exact click path in PlotSet, from a blank template to a finished chart.
- 01
Open the Draw the Line template
From the PlotSet dashboard, start a new project and choose Draw the Line Chart from the Line and Area category. It loads with a sample of US coal and wind and solar share.
Every guide starts here. Pick the category, then the template: it is the same grid whichever chart type you are after. - 02
Add your data
Import a CSV or .xlsx file, paste rows from a spreadsheet, or connect a Google Sheet. Put the x values in the first column and one line per column after it.
The data view, shown here on a bar chart project. Upload a CSV, lift the numbers out of an image with Magic Import, or sync a Google Sheet. The panel is identical for every chart type. - 03
Check the column bindings
Choose which columns the reader will guess and which stay fixed. The x axis column is the label.
Bindings decide which column becomes the label, which supplies the values and which drives the colour. Auto Binding guesses them from your headers, so check it rather than assume it. - 04
Set where drawing starts
In the Drawing tab choose what share of each line is shown before the reader takes over. Pick a point that leaves the next move uncertain.
The Preview tab for a Draw the Line Chart. Every styling control lives in the outlined panel, each on its own tab: appearance, header, footer and the options specific to this chart type. - 05
Choose how the reveal plays
In the same tab, pick whether the real line wipes, fades or draws itself in, and whether guesses snap to steps.
- 06
Write the prompt and the feedback
The Prompt and Score messages tabs hold the instruction, the submit button text and four tiers of feedback, with a token for the size of the gap.
- 07
Style the lines and axes
Use the Color, Lines, X axis, Y axis and Legend tabs to set the look. The Y axis tab controls the baseline and headroom.
- 08
Publish and embed
Publish for a live chart and copy the embed code from the Share dialog. Play it through yourself once, including the reveal, before you share it.
Share is how a finished chart becomes a public link and an embed code.
Start from the Draw the Line Chart template with sample data already loaded, then swap in your own.
Open the templatePublish, embed or export it
The last stretch is the same for every chart type: Share turns the chart into a live public link and an embed code, Export writes it out as a static file.
Share: public link and embed code
Activating the embed code and public link publishes the chart. The link is safe to send to anyone, and the embed code drops into any page as an iframe that keeps the hover tooltips and the interactivity. Edit the chart later and hit Recreate to push those changes out to both.
Export: SVG, PNG or JPG
Export writes a static copy at whatever size you need. SVG stays sharp at any scale and can still be edited in a design tool; PNG and JPG are the safe choices for slides and documents. The scale multiplier is what gets you a crisp image on a retina screen.
Styling tips for a Draw the Line Chart
Stop before the interesting part
Cut the visible line just before the turn, so the reader has a real decision to make.
Write feedback with a voice
Tailor the four score messages to your story rather than keeping the generic text.
Add a fixed context line
A second line that is always visible gives the reader something to reason from.
Keep keyboard mode on
It adds a slider per point, so readers without a mouse can still play.
Common mistakes when making a Draw the Line Chart
There is nothing to draw
The drawing point is at or near the end of the data. Lower the share of the line that is shown.
One line is squashed flat
The lines are on very different scales and share one axis. Set a custom axis range or use similar units.
The tooltip does not show the hidden values
This is by design. Values on the hidden stretch only appear after the reveal, so hovering cannot leak the answer.
The PNG shows the wrong stage
A static export captures whatever stage the chart is in. Reveal the line before you export.
Learn more about the Draw the Line Chart
Not sure the Draw the Line Chart is the right choice? See what it is, when to use it and when not to.
Draw the Line Chart: common questions
Yes. Bind several columns as guessed lines, and the reader draws each in turn.
Make your Draw the Line Chart now
Free to start with 300+ templates. No credit card required.