Sample CSV
| Country | Continent | Flag | Day 1 | Day 2 | Day 3 |
|---|---|---|---|---|---|
| United States | Americas | https://example.com/us.png | 4 | 12 | 20 |
| China | Asia | https://example.com/cn.png | 6 | 15 | 24 |
| Japan | Asia | https://example.com/jp.png | 2 | 7 | 13 |
| France | Europe | https://example.com/fr.png | 1 | 5 | 11 |
How to Create a Horserace Chart
A step by step walkthrough for building an animated race of lines, with flags or logos and a live rank label, in PlotSet.
About 8 minutesYou will end up with an animated chart where each contender's line grows across the stages, with a live rank at its head.
Expect about eight minutes. Most of it goes on shaping the data so there is one column for each stage.
The data you need
One row per contender, with a column for each stage in running order and, if you want them, a category and a picture link.
Use two or more stage columns, each a plain number, in the order the race runs.
The values should be running totals. If they are per stage, switch on the accumulate setting.
A category column colours the lines and builds the legend.
A picture column of image links replaces the plain circle at the head of each line.
The steps
The exact click path in PlotSet, from a blank template to a finished chart.
- 01
Open the Horserace template
From the PlotSet dashboard, start a new project and choose Horserace from the Line and Area Charts category. It loads with twelve countries over twelve days.
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. Each row is one contender.
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
Bind the name and the stages
Choose the name column, then select every stage column in running order. Add a category and a picture column if you have them.
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 how the race scores
In the Race tab, choose between score and rank, decide whether higher or lower wins, and limit the race to the top contenders.
The Preview tab for a Horserace 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
Style the lines and heads
The Lines tab sets the curve and width. The Runner heads tab sets the marker size and shape, and the Labels tab sets what each label says.
- 06
Set playback
The Playback tab chooses autoplay, the time spent on each stage, easing and looping.
- 07
Add captions and filters
In the Captions tab, add timed notes for key moments. The Filter controls tab adds buttons that narrow the race to one group.
- 08
Publish and embed
Publish for a live chart and copy the embed code from the Share dialog. Play it through once at the width of your page before you share it.
Share is how a finished chart becomes a public link and an embed code.
Start from the Horserace 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 Horserace Chart
Cut the pack
Showing the top eight or ten keeps the labels apart at the finish.
Use pictures sparingly
Flags and logos help, but only when they are easy to tell apart at a small size.
Pause at the end
A restart pause on the loop gives readers time to read the final order.
Add one caption
A single note at the turning point does more than five.
Common mistakes when making a Horserace Chart
The lines stop short
A stage column is empty for that contender. Fill the gap or choose how missing data is handled in the Race tab.
The order looks wrong
The stage columns are bound in the wrong order. Reselect them from left to right.
A flag shows as a plain circle
The picture link is broken or blocked. Open it in a browser to check.
The labels overlap
Too many contenders are close together. Limit the race, or turn on label spacing.
Learn more about the Horserace Chart
Not sure the Horserace Chart is the right choice? See what it is, when to use it and when not to.
Horserace Chart: common questions
Yes. Turn on autoplay in the Playback tab, and choose whether it loops.
Make your Horserace Chart now
Free to start with 300+ templates. No credit card required.