diff --git a/src/main/java/seng302/controllers/CanvasController.java b/src/main/java/seng302/controllers/CanvasController.java
index 7d0db4ed..c5609cad 100644
--- a/src/main/java/seng302/controllers/CanvasController.java
+++ b/src/main/java/seng302/controllers/CanvasController.java
@@ -128,7 +128,7 @@ public class CanvasController {
                     long elapsedNanosPerFrame = elapsedNanos / frameTimes.length ;
                     Double frameRate = 1_000_000_000.0 / elapsedNanosPerFrame ;
                     drawFps(frameRate.intValue());
-//                    raceViewController.checkForPositionChange();
+                    raceViewController.updateSparkLine();
                 }
 
                 // TODO: 1/05/17 cir27 - Make the RaceObjects update on the actual delay.
diff --git a/src/main/java/seng302/controllers/RaceViewController.java b/src/main/java/seng302/controllers/RaceViewController.java
index e7eb3b90..0f2fabef 100644
--- a/src/main/java/seng302/controllers/RaceViewController.java
+++ b/src/main/java/seng302/controllers/RaceViewController.java
@@ -1,17 +1,13 @@
 package seng302.controllers;
 
-import java.time.Year;
-import java.util.concurrent.ConcurrentLinkedQueue;
 import javafx.animation.KeyFrame;
 import javafx.animation.Timeline;
 import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
 import javafx.fxml.FXML;
 import javafx.fxml.FXMLLoader;
-import javafx.scene.Node;
 import javafx.scene.Scene;
 import javafx.scene.chart.LineChart;
-import javafx.scene.chart.NumberAxis;
 import javafx.scene.chart.XYChart;
 import javafx.scene.chart.XYChart.Series;
 import javafx.scene.control.Button;
@@ -37,7 +33,6 @@ import seng302.models.parsers.StreamParser;
 
 import java.io.IOException;
 import java.util.*;
-import java.util.stream.Collectors;
 
 /**
  * Created by ptg19 on 29/03/17.
@@ -70,7 +65,7 @@ public class RaceViewController extends Thread implements ImportantAnnotationDel
     private Timeline timerTimeline;
     private Race race;
     private Stage stage;
-    private static HashMap<Integer, Series<String, Double>> sparklineData = new HashMap<>();
+    private static HashMap<Integer, Series<String, Double>> sparkLineData = new HashMap<>();
     private ArrayList<String> positions;
     private int time;
 
@@ -188,54 +183,57 @@ public class RaceViewController extends Thread implements ImportantAnnotationDel
         annotationSlider.setValue(2);
     }
 
-    private void initializeSparkline(){
-        raceSparkLine.setTitle("Boat Positions");
+    public void updateSparkLine(){
+        ArrayList<Yacht> sparkLineCandidates = new ArrayList<>();
         for (Yacht yacht: startingBoats){
+            if (!sparkLineData.containsKey(yacht.getSourceID()) && yacht.getPosition() != "-") {
+                sparkLineCandidates.add(yacht);
+            }
+        }
+        for (Yacht yacht: sparkLineCandidates){
             XYChart.Series<String, Double> yachtData = new XYChart.Series<>();
             yachtData.setName(yacht.getBoatName());
-            yachtData.getData().add(new XYChart.Data<>(Integer.toString(yacht.getLegNumber()), Double.parseDouble(yacht.getPosition())));
-            sparklineData.put(yacht.getSourceID(),yachtData);
-        }
-        List<XYChart.Series<String, Double>> positions = new ArrayList<XYChart.Series<String, Double>>(sparklineData.values());
+            yachtData.getData().add(new XYChart.Data<>(Integer.toString(yacht.getLegNumber()),1 + sparkLineCandidates.size() - Double.parseDouble(yacht.getPosition())));
+            sparkLineData.put(yacht.getSourceID(), yachtData);
+       }
 
-        Collections.sort(positions, new Comparator<XYChart.Series>() {
-            @Override
-            public int compare(Series o1, Series o2) {
-                Integer leg1 =  Integer.parseInt( ((XYChart.Data<String, Double>) o1.getData().get(o1.getData().size()-1)).getXValue());
-                Integer leg2 =  Integer.parseInt( ((XYChart.Data<String, Double>) o2.getData().get(o2.getData().size()-1)).getXValue());
-                if (leg2 < leg1){
-                    return 1;
-                } else {
-                    return -1;
-                }
+        // Lambda function to sort the series in order of leg (later legs shown more to the right)
+        List<XYChart.Series<String, Double>> positions = new ArrayList<>(sparkLineData.values());
+        Collections.sort(positions, (o1, o2) -> {
+            Integer leg1 =  Integer.parseInt( ((XYChart.Data<String, Double>) o1.getData().get(o1.getData().size()-1)).getXValue());
+            Integer leg2 =  Integer.parseInt( ((XYChart.Data<String, Double>) o2.getData().get(o2.getData().size()-1)).getXValue());
+            if (leg2 < leg1){
+                return 1;
+            } else {
+                return -1;
             }
         });
+        raceSparkLine.setCreateSymbols(false);
         for (Series<String, Double> spark: positions){
-            raceSparkLine.getData().add(spark);
+            if (!raceSparkLine.getData().contains(spark)) {
+                raceSparkLine.getData().add(spark);
+                spark.getNode().lookup(".chart-series-line").setStyle("-fx-stroke:" + getBoatColorAsRGB(spark.getName()).toString());
+            }
         }
-
     }
 
 
     public static void updateYachtPositionSparkline(Yacht yacht, Integer legNumber){
-        XYChart.Series<String, Double> positionData =  sparklineData.get(yacht.getSourceID());
-        positionData.getData().add(new XYChart.Data<>(Integer.toString(legNumber), Double.parseDouble(yacht.getPosition())));
+        XYChart.Series<String, Double> positionData =  sparkLineData.get(yacht.getSourceID());
+        positionData.getData().add(new XYChart.Data<>(Integer.toString(legNumber), 1 + sparkLineData.size() - Double.parseDouble(yacht.getPosition())));
     }
 
-
-    public void checkForPositionChange(){
-        // initialize position array
-        if (startingBoats.size() == 6 && raceSparkLine.getData().size() != 6){
-            Boolean positionsAssigned = true;
-            for (Yacht yacht: startingBoats){
-                if (Objects.equals(yacht.getPosition(), "-")) {
-                    positionsAssigned = false;
-                }
-            }
-            if (positionsAssigned){
-                initializeSparkline();
+    private String getBoatColorAsRGB(String boatName){
+        Color color = Color.WHITE;
+        for (Yacht yacht: startingBoats){
+            if (yacht.getBoatName() == boatName){
+                color = yacht.getColour();
             }
         }
+        return String.format( "#%02X%02X%02X",
+            (int)( color.getRed() * 255 ),
+            (int)( color.getGreen() * 255 ),
+            (int)( color.getBlue() * 255 ) );
     }
 
 
@@ -524,7 +522,7 @@ public class RaceViewController extends Thread implements ImportantAnnotationDel
     }
 
     public static boolean sparkLineStatus(Integer yachtId) {
-        if (sparklineData.containsKey(yachtId)){
+        if (sparkLineData.containsKey(yachtId)){
             return true;
         }
         return false;
diff --git a/src/main/java/seng302/models/Yacht.java b/src/main/java/seng302/models/Yacht.java
index 5b19046f..22472810 100644
--- a/src/main/java/seng302/models/Yacht.java
+++ b/src/main/java/seng302/models/Yacht.java
@@ -107,9 +107,9 @@ public class Yacht {
     }
 
     public void setLegNumber(Integer legNumber) {
-//        if (colour != null  && position != "-" && legNumber != this.legNumber&& RaceViewController.sparkLineStatus(sourceID)) {
-//            RaceViewController.updateYachtPositionSparkline(this, legNumber);
-//        }
+        if (colour != null  && position != "-" && legNumber != this.legNumber&& RaceViewController.sparkLineStatus(sourceID)) {
+            RaceViewController.updateYachtPositionSparkline(this, legNumber);
+        }
         this.legNumber = legNumber;
 
     }
diff --git a/src/main/resources/css/master.css b/src/main/resources/css/master.css
index 8223fc00..a97dcfa5 100644
--- a/src/main/resources/css/master.css
+++ b/src/main/resources/css/master.css
@@ -181,4 +181,22 @@ Remove scroll bars
     -fx-background-radius: 0;
     -fx-background-insets: 0;
     -fx-padding: 0;
-}
\ No newline at end of file
+}
+
+/**
+SparkLine elements
+ */
+
+
+/*.spark-line-yaxis{*/
+    /*-fx-font-color: white;*/
+    /*-fx-tick-label-fill: #ffffff;}*/
+
+/*.spark-line-xaxis{*/
+    /*-fx-font-color: white;*/
+    /*-fx-tick-label-fill: #ffffff;*/
+/*}*/
+
+.chart{
+    -fx-background-color: #ffffff;
+}
diff --git a/src/main/resources/views/RaceView.fxml b/src/main/resources/views/RaceView.fxml
index 3260cec2..970f8200 100644
--- a/src/main/resources/views/RaceView.fxml
+++ b/src/main/resources/views/RaceView.fxml
@@ -62,19 +62,19 @@
             <Button fx:id="selectAnnotationBtn" layoutX="35.0" layoutY="578.0" mnemonicParsing="false" prefHeight="18.0" prefWidth="170.0" styleClass="blue-ui-btn" text="Select Annotations" textFill="WHITE" />
             <Text fill="WHITE" layoutX="11.0" layoutY="649.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Boat Selection" />
             <ComboBox fx:id="boatSelectionComboBox" layoutX="37.0" layoutY="664.0" prefHeight="25.0" prefWidth="170.0" promptText="Select Boat" styleClass="combo-box-base" />
+            <LineChart fx:id="raceSparkLine" layoutX="-15.0" layoutY="719.0" legendVisible="false" prefHeight="277.0" prefWidth="260.0" title="Boat Positions">
+              <xAxis>
+                <CategoryAxis label="Leg Number" side="BOTTOM" styleClass="spark-line-xaxis" />
+              </xAxis>
+              <yAxis>
+                <NumberAxis label="Position" minorTickCount="1" minorTickLength="1.0" side="LEFT" styleClass="spark-line-yaxis" tickLabelGap="1.0" tickUnit="1.0" upperBound="7.0" />
+              </yAxis>
+            </LineChart>
             </children>
         </AnchorPane>
         <AnchorPane fx:id="contentAnchorPane" prefHeight="960.0" prefWidth="1280.0" style="-fx-background-color: skyblue;" GridPane.columnIndex="1" GridPane.halignment="LEFT" GridPane.rowSpan="2147483647" GridPane.valignment="TOP">
          <children>
             <fx:include fx:id="includedCanvas" source="CanvasView.fxml" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
-            <LineChart fx:id="raceSparkLine" layoutX="43.0" layoutY="597.0" prefHeight="277.0" prefWidth="727.0">
-              <xAxis>
-                <CategoryAxis side="BOTTOM" />
-              </xAxis>
-              <yAxis>
-                <NumberAxis side="LEFT" tickLabelGap="1.0" upperBound="6.0" />
-              </yAxis>
-            </LineChart>
          </children></AnchorPane>
     </children>
 </GridPane>