diff --git a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js
index 5309079c04..74cbf47547 100644
--- a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js
+++ b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js
@@ -18,8 +18,7 @@ window.GOVUK = window.GOVUK || {};
 
     for (var i = 0; i < $barcharts.length; i++) {
       var $table = $barcharts[i]
-      // magna charta is a jquery plugin so we have to pass a jquery object to it
-      $.magnaCharta($($table), { toggleText: 'Change between chart and table' })
+      new GOVUK.Modules.MagnaCharta().start($table, { toggleText: 'Change between chart and table' })
       $table.classList.add('js-barchart-table-init')
     }
   }
diff --git a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js
index 8b12b72645..493ac07e93 100644
--- a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js
+++ b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js
@@ -1,94 +1,104 @@
-/* global jQuery */
-/*
- * magna-charta
- * https://github.com/alphagov/magna-charta
- *
- * Copyright (c) 2012 Jack Franklin
- * Licensed under the MIT license.
-*/
-
-(function ($) {
-  'use strict'
-
-  var MagnaCharta = function () {
-    this.init = function (table, options) {
-      var defaults = {
-        outOf: 65,
-        applyOnInit: true,
-        toggleText: 'Toggle between chart and table',
-        autoOutdent: false,
-        outdentAll: false,
-        toggleAfter: false // BOOL set TRUE to append the toggle link
-      }
+// Based on magna-charta: https://github.com/alphagov/magna-charta
+
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function MagnaCharta () { }
+
+  MagnaCharta.prototype.start = function ($module, options) {
+    this.$module = $module[0]
+    this.options = {
+      outOf: 65,
+      applyOnInit: true,
+      toggleText: 'Toggle between chart and table',
+      autoOutdent: false,
+      outdentAll: false,
+      toggleAfter: false, // BOOL set TRUE to append the toggle link
+      returnReference: false // for testing purposes
+    }
 
-      this.options = $.extend({}, defaults, options)
+    for (var k in options) this.options[k] = options[k]
+    this.detectIEVersion()
 
-      /* detecting IE version
-       * original from James Padolsey: https://gist.github.com/527683
-       * and then rewritten by Jack Franklin to pass JSHint
-       */
-      var ie = (function () {
-        var undef
-        var v = 3
-        var div = document.createElement('div')
-        var all = div.getElementsByTagName('i')
+    // if it's IE7 or less, we just show the plain tables
+    this.ENABLED = !(this.ie && this.ie < 8)
 
-        do {
-          div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->'
-        } while (v < 10 && all[0])
+    // store a reference to the table in the object
+    this.$table = $module
 
-        return (v > 4) ? v : undef
-      })()
+    // lets make what will become the new graph
+    this.$graph = document.createElement('div')
+    this.$graph.setAttribute('aria-hidden', 'true') // FIXME this never gets updated
 
-      // if it's IE7 or less, we just show the plain tables
-      this.ENABLED = !(ie && ie < 8)
+    // copy over classes from the table, and add the extra one
+    this.$graph.setAttribute('class', this.$table.className)
+    this.$graph.classList.add('mc-chart')
 
-      // store a reference to the table in the object
-      this.$table = table
+    // set the stacked option based on
+    // giving the table a class of mc-stacked
+    this.options.stacked = this.$table.classList.contains('mc-stacked')
 
-      // lets make what will become the new graph
-      this.$graph = $('<div/>').attr('aria-hidden', 'true')
+    // set the negative option based on
+    // giving the table a class of mc-negative
+    this.options.negative = this.$table.classList.contains('mc-negative')
 
-      // copy over classes from the table, and add the extra one
-      this.$graph.attr('class', this.$table.attr('class')).addClass('mc-chart')
+    // true if it's a 'multiple' table
+    // this means multiple bars per rows, but not stacked.
+    var moreThanTwoTDs = this.$table.querySelectorAll('tbody tr')[0].querySelectorAll('td').length > 2
+    this.options.multiple = !this.options.stacked && (this.$table.classList.contains('mc-multiple') || moreThanTwoTDs)
 
-      // set the stacked option based on
-      // giving the table a class of mc-stacked
-      this.options.stacked = this.$table.hasClass('mc-stacked')
+    // set the outdent options
+    // which can be set via classes or overriden by setting the value to true
+    // in the initial options object that's passed in
+    this.options.autoOutdent = this.options.autoOutdent || this.$table.classList.contains('mc-auto-outdent')
 
-      // set the negative option based on
-      // giving the table a class of mc-negative
-      this.options.negative = this.$table.hasClass('mc-negative')
+    this.options.outdentAll = this.options.outdentAll || this.$table.classList.contains('mc-outdented')
 
-      // true if it's a 'multiple' table
-      // this means multiple bars per rows, but not stacked.
-      this.options.multiple = !this.options.stacked && (
-        this.$table.hasClass('mc-multiple') ||
-        this.$table.find('tbody tr').first().find('td').length > 2)
+    // add a mc-multiple class if it is
+    if (this.options.multiple) {
+      this.$graph.classList.add('mc-multiple')
+    }
 
-      // set the outdent options
-      // which can be set via classes or overriden by setting the value to true
-      // in the initial options object that's passed in
-      this.options.autoOutdent = this.options.autoOutdent ||
-        this.$table.hasClass('mc-auto-outdent')
+    this.options.hasCaption = !!this.$table.querySelectorAll('caption').length
 
-      this.options.outdentAll = this.options.outdentAll ||
-        this.$table.hasClass('mc-outdented')
+    if (this.ENABLED) {
+      this.apply()
+      // if applyOnInit is false, toggle immediately to show the table and hide the graph
+      if (!this.options.applyOnInit) {
+        this.toggleLink.click()
+      }
+    }
 
-      // add a mc-multiple class if it is
-      if (this.options.multiple) { this.$graph.addClass('mc-multiple') }
+    if (this.options.returnReference) {
+      return this
+    }
+  }
 
-      this.options.hasCaption = !!this.$table.find('caption').length
+  MagnaCharta.prototype.detectIEVersion = function () {
+    // detect IE version: James Padolsey, https://gist.github.com/527683
+    this.ie = (function () {
+      var undef
+      var v = 3
+      var div = document.createElement('div')
+      var all = div.getElementsByTagName('i')
 
-      if (this.ENABLED) {
-        this.apply()
-        // if applyOnInit is false, toggle immediately
-        // showing the table, hiding the graph
-        if (!this.options.applyOnInit) {
-          this.toggle()
-        }
-      }
-      return this
+      do {
+        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->'
+      } while (v < 10 && all[0])
+
+      return (v > 4) ? v : undef
+    })()
+  }
+
+  MagnaCharta.prototype.apply = function () {
+    if (this.ENABLED) {
+      this.constructChart()
+      this.addClassesToHeader()
+      this.applyWidths()
+      this.insert()
+      this.$table.classList.add('visually-hidden')
+      this.applyOutdent()
     }
   }
 
@@ -97,57 +107,76 @@
 
   // constructs the header
   MagnaCharta.prototype.construct.thead = function () {
-    var thead = $('<div />', {
-      class: 'mc-thead'
-    })
+    var thead = document.createElement('div')
+    thead.classList.add('mc-thead')
+
+    var tr = document.createElement('div')
+    tr.classList.add('mc-tr')
 
-    var tr = $('<div />', { class: 'mc-tr' })
     var output = ''
-    this.$table.find('th').each(function (i, item) {
+    var allTheTHs = this.$table.querySelectorAll('th')
+
+    for (var i = 0; i < allTheTHs.length; i++) {
       output += '<div class="mc-th">'
-      output += $(item).html()
+      output += allTheTHs[i].innerHTML
       output += '</div>'
-    })
-    tr.append(output)
-    thead.append(tr)
+    }
+
+    tr.innerHTML = output
+    thead.appendChild(tr)
 
     return thead
   }
 
   MagnaCharta.prototype.construct.tbody = function () {
-    var tbody = $('<div />', {
-      class: 'mc-tbody'
-    })
+    var tbody = document.createElement('div')
+    tbody.classList.add('mc-tbody')
+
+    var allTheTbodyTrs = this.$table.querySelectorAll('tbody tr')
+
+    for (var i = 0; i < allTheTbodyTrs.length; i++) {
+      var tr = document.createElement('div')
+      tr.classList.add('mc-tr')
 
-    this.$table.find('tbody tr').each(function (i, item) {
-      var tr = $('<div />', { class: 'mc-tr' })
       var cellsOutput = ''
-      $(item).find('td').each(function (j, cell) {
+      var allTheTds = allTheTbodyTrs[i].querySelectorAll('td')
+
+      for (var j = 0; j < allTheTds.length; j++) {
         cellsOutput += '<div class="mc-td">'
-        cellsOutput += $(cell).html()
+        cellsOutput += allTheTds[j].innerHTML
         cellsOutput += '</div>'
-      })
-      tr.append(cellsOutput)
-      tbody.append(tr)
-    })
+      }
+      tr.innerHTML = cellsOutput
+      tbody.appendChild(tr)
+    }
+
     return tbody
   }
 
   MagnaCharta.prototype.construct.caption = function () {
-    var cap = this.$table.find('caption')
-    return cap.clone()
+    var cap = this.$table.querySelector('caption')
+    return cap.cloneNode(true)
   }
 
   // construct a link to allow the user to toggle between chart and table
-  MagnaCharta.prototype.construct.toggleLink = function () {
+  MagnaCharta.prototype.construct.toggleLink = function (toggleText) {
+    var link = document.createElement('a')
+    link.setAttribute('href', '#')
+    link.classList.add('mc-toggle-link')
+    link.innerHTML = toggleText
+    link.setAttribute('aria-hidden', 'true')
+
+    return link
+  }
+
+  // toggles between showing the table and showing the chart
+  MagnaCharta.prototype.addToggleClick = function () {
     var that = this
-    return $('<a />', {
-      href: '#',
-      class: 'mc-toggle-link',
-      text: this.options.toggleText,
-      'aria-hidden': 'true'
-    }).on('click', function (e) {
-      that.toggle(e)
+
+    this.toggleLink.addEventListener('click', function (e) {
+      e.preventDefault()
+      that.$graph.classList.toggle('visually-hidden')
+      that.$table.classList.toggle('visually-hidden')
     })
   }
 
@@ -157,40 +186,22 @@
     // get at options and properties
     var thead = this.construct.thead.call(this)
     var tbody = this.construct.tbody.call(this)
-    var toggleLink = this.construct.toggleLink.call(this)
+    this.toggleLink = this.construct.toggleLink(this.options.toggleText)
+    this.addToggleClick(this.toggleLink)
 
     if (this.options.hasCaption) {
       var caption = this.construct.caption.call(this)
-      this.$graph.append(caption)
+      this.$graph.appendChild(caption)
     }
 
     if (this.options.toggleAfter) {
-      this.$table.after(toggleLink)
+      this.$table.insertAdjacentElement('afterend', this.toggleLink)
     } else {
-      this.$table.before(toggleLink)
+      this.$table.insertAdjacentElement('beforebegin', this.toggleLink)
     }
 
-    this.$graph.append(thead)
-    this.$graph.append(tbody)
-  }
-
-  MagnaCharta.prototype.apply = function () {
-    if (this.ENABLED) {
-      this.constructChart()
-      this.addClassesToHeader()
-      this.calculateMaxWidth()
-      this.applyWidths()
-      this.insert()
-      this.$table.addClass('visually-hidden')
-      this.applyOutdent()
-    }
-  }
-
-  // toggles between showing the table and showing the chart
-  MagnaCharta.prototype.toggle = function (e) {
-    this.$graph.toggle()
-    this.$table.toggleClass('visually-hidden')
-    if (e) { e.preventDefault() }
+    this.$graph.appendChild(thead)
+    this.$graph.appendChild(tbody)
   }
 
   // some handy utility methods
@@ -215,92 +226,102 @@
   }
 
   MagnaCharta.prototype.addClassesToHeader = function () {
-    var headerCells = this.$graph.find('.mc-th').filter(':not(:first)')
+    var headerCells = this.$graph.querySelectorAll('.mc-th')
+    var looplength = headerCells.length
 
     if (this.options.stacked) {
-      headerCells.last().addClass('mc-stacked-header mc-header-total')
-      headerCells = headerCells.filter(':not(:last)')
+      var last = looplength - 1
+      headerCells[last].classList.add('mc-stacked-header', 'mc-header-total')
+      looplength -= 1
     }
 
-    headerCells.addClass('mc-key-header').filter(':not(.mc-stacked-header)').each(function (i, item) {
-      $(item).addClass('mc-key-' + (i + 1))
-    })
+    // we deliberately don't apply this to the first cell
+    for (var i = 1; i < looplength; i++) {
+      headerCells[i].classList.add('mc-key-header')
+      if (!headerCells[i].classList.contains('mc-stacked-header')) {
+        headerCells[i].classList.add('mc-key-' + i)
+      }
+    }
   }
 
   MagnaCharta.prototype.calculateMaxWidth = function () {
-    // JS scoping sucks
-    var that = this
-
-    // store the cell values in here so later
-    // so we can figure out the maximum value later
+    // store the cell values in here so we can figure out the maximum value later
     var values = []
 
-    // var to store the maximum negative value
-    // (used only for negative charts)
+    // var to store the maximum negative value (used only for negative charts)
     var maxNegativeValue = 0
 
     // loop through every tr in the table
-    this.$graph.find('.mc-tr').each(function (i, item) {
-      var $this = $(item)
+    var trs = this.$graph.querySelectorAll('.mc-tr')
+    for (var i = 0; i < trs.length; i++) {
+      var $this = trs[i]
 
       // the first td is going to be the key, so ignore it
-      var $bodyCells = $this.find('.mc-td:not(:first)')
-
-      // if it's stacked, the last column is a totals
-      // so we don't want that in our calculations
-      if (that.options.stacked) {
-        $bodyCells.last().addClass('mc-stacked-total')
-        $bodyCells = $bodyCells.filter(':not(:last)')
-      }
-
-      // first td in each row is key
-      $this.find('.mc-td:first').addClass('mc-key-cell')
-
-      // store the total value of the bar cells in a row
-      // for anything but stacked, this is just the value of one <td>
-      var cellsTotalValue = 0
+      var $bodyCells = $this.querySelectorAll('.mc-td:not(:first-child)')
+      var bodyCellsLength = $bodyCells.length
+
+      // might be the row containing th elements, so we need to check
+      if (bodyCellsLength) {
+        // if it's stacked, the last column is a totals
+        // so we don't want that in our calculations
+        if (this.options.stacked) {
+          $bodyCells[bodyCellsLength - 1].classList.add('mc-stacked-total')
+          bodyCellsLength -= 1
+        }
 
-      $bodyCells.each(function (j, cell) {
-        var $cell = $(cell).addClass('mc-bar-cell').addClass('mc-bar-' + (j + 1))
-        var cellVal = that.utils.stripValue($cell.text())
+        // first td in each row is key
+        var firstCell = $this.querySelector('.mc-td')
+        if (firstCell) {
+          firstCell.classList.add('mc-key-cell')
+        }
 
-        if (that.utils.isFloat(cellVal)) {
-          var parsedVal = parseFloat(cellVal, 10)
-          var absParsedVal = Math.abs(parsedVal)
-          if (parsedVal === 0) {
-            $cell.addClass('mc-bar-zero')
-          }
+        // store the total value of the bar cells in a row
+        // for anything but stacked, this is just the value of one <td>
+        var cellsTotalValue = 0
+
+        for (var j = 0; j < bodyCellsLength; j++) {
+          var $cell = $bodyCells[j]
+          $cell.classList.add('mc-bar-cell')
+          $cell.classList.add('mc-bar-' + (j + 1))
+          var cellVal = this.utils.stripValue($cell.innerText)
+
+          if (this.utils.isFloat(cellVal)) {
+            var parsedVal = parseFloat(cellVal, 10)
+            var absParsedVal = Math.abs(parsedVal)
+            if (parsedVal === 0) {
+              $cell.classList.add('mc-bar-zero')
+            }
 
-          if (that.options.negative) {
-            if (that.utils.isNegative(parsedVal)) {
-              $cell.addClass('mc-bar-negative')
-              if (absParsedVal > maxNegativeValue) {
-                maxNegativeValue = absParsedVal
+            if (this.options.negative) {
+              if (this.utils.isNegative(parsedVal)) {
+                $cell.classList.add('mc-bar-negative')
+                if (absParsedVal > maxNegativeValue) {
+                  maxNegativeValue = absParsedVal
+                }
+              } else {
+                $cell.classList.add('mc-bar-positive')
               }
-            } else {
-              $cell.addClass('mc-bar-positive')
             }
-          }
-          // now we are done with our negative calculations
-          // set parsedVal to absParsedVal
-          parsedVal = absParsedVal
+            // now we are done with our negative calculations
+            // set parsedVal to absParsedVal
+            parsedVal = absParsedVal
 
-          if (!that.options.stacked) {
-            cellsTotalValue = parsedVal
-            values.push(parsedVal)
-          } else {
-            cellsTotalValue += parsedVal
+            if (!this.options.stacked) {
+              cellsTotalValue = parsedVal
+              values.push(parsedVal)
+            } else {
+              cellsTotalValue += parsedVal
+            }
           }
         }
-      })
+      }
 
-      // if stacked, we need to push the total value of the row
-      // to the values array
-      if (that.options.stacked) { values.push(cellsTotalValue) }
-    })
+      // if stacked, we need to push the total value of the row to the values array
+      if (this.options.stacked) { values.push(cellsTotalValue) }
+    }
 
     var resp = {}
-    resp.max = parseFloat(that.utils.returnMax(values), 10)
+    resp.max = parseFloat(this.utils.returnMax(values), 10)
     resp.single = parseFloat(this.options.outOf / resp.max, 10)
 
     if (this.options.negative) {
@@ -313,43 +334,42 @@
 
   MagnaCharta.prototype.applyWidths = function () {
     this.dimensions = this.calculateMaxWidth()
-    var that = this
+    var trs = this.$graph.querySelectorAll('.mc-tr')
 
-    this.$graph.find('.mc-tr').each(function (i, row) {
-      var $this = $(row)
+    for (var i = 0; i < trs.length; i++) {
+      var cells = trs[i].querySelectorAll('.mc-bar-cell')
 
-      $this.find('.mc-bar-cell').each(function (j, cell) {
-        var $cell = $(cell)
-        var parsedCellVal = parseFloat(that.utils.stripValue($cell.text()), 10)
-        var parsedVal = parsedCellVal * that.dimensions.single
+      for (var j = 0; j < cells.length; j++) {
+        var $cell = cells[j]
+        var parsedCellVal = parseFloat(this.utils.stripValue($cell.innerText), 10)
+        var parsedVal = parsedCellVal * this.dimensions.single
         var absParsedCellVal = Math.abs(parsedCellVal)
         var absParsedVal = Math.abs(parsedVal)
 
         // apply the left margin to the positive bars
-        if (that.options.negative) {
-          if ($cell.hasClass('mc-bar-positive')) {
-            $cell.css('margin-left', that.dimensions.marginLeft + '%')
+        if (this.options.negative) {
+          if ($cell.classList.contains('mc-bar-positive')) {
+            $cell.style.marginLeft = this.dimensions.marginLeft + '%'
           } else {
             // if its negative but not the maximum negative
             // we need to give it enough margin to push it further right to align
-            if (absParsedCellVal < that.dimensions.maxNegative) {
-              // left margin needs to be
-              // (largestNegVal - thisNegVal)*single
-              var leftMarg = (that.dimensions.maxNegative - absParsedCellVal) * that.dimensions.single
-              $cell.css('margin-left', leftMarg + '%')
+            if (absParsedCellVal < this.dimensions.maxNegative) {
+              // left margin needs to be (largestNegVal - thisNegVal) * single
+              var leftMarg = (this.dimensions.maxNegative - absParsedCellVal) * this.dimensions.single
+              $cell.style.marginLeft = leftMarg + '%'
             }
           }
         }
 
         // wrap the cell value in a span tag
-        $cell.wrapInner('<span />')
-        $cell.css('width', absParsedVal + '%')
-      })
-    })
+        $cell.innerHTML = '<span>' + $cell.innerHTML + '</span>'
+        $cell.style.width = absParsedVal + '%'
+      }
+    }
   }
 
   MagnaCharta.prototype.insert = function () {
-    this.$table.after(this.$graph)
+    this.$table.insertAdjacentElement('afterend', this.$graph)
   }
 
   MagnaCharta.prototype.applyOutdent = function () {
@@ -360,39 +380,34 @@
      * to push it out (the bar is styled to be relative)
      * unfortunately this has to be done once the chart has been inserted
      */
-    var that = this
+    var cells = this.$graph.querySelectorAll('.mc-bar-cell')
 
-    this.$graph.find('.mc-bar-cell').each(function (i, cell) {
-      var $cell = $(cell)
-      var cellVal = parseFloat(that.utils.stripValue($cell.text()), 10)
-      var $cellSpan = $cell.children('span')
-      var spanWidth = $cellSpan.width() + 10 // +10 just for extra padding
-      var cellWidth = $cell.width()
+    for (var i = 0; i < cells.length; i++) {
+      var $cell = cells[i]
+      var cellVal = parseFloat(this.utils.stripValue($cell.innerText), 10)
+      var $cellSpan = $cell.querySelector('span')
+      var spanWidth = parseFloat(window.getComputedStyle($cellSpan, null).width.replace('px', '')) + 10 // +10 just for extra padding
+      var cellWidth = parseFloat(window.getComputedStyle($cell, null).width.replace('px', ''))
 
-      if (!that.options.stacked) {
+      if (!this.options.stacked) {
       // if it's 0, it is effectively outdented
-        if (cellVal === 0) { $cell.addClass('mc-bar-outdented') }
-
-        if ((that.options.autoOutdent && spanWidth > cellWidth) || that.options.outdentAll) {
-          $cell.addClass('mc-bar-outdented')
+        if (cellVal === 0) { $cell.classList.add('mc-bar-outdented') }
 
-          $cellSpan.css({
-            'margin-left': '100%',
-            display: 'inline-block'
-          })
+        if ((this.options.autoOutdent && spanWidth > cellWidth) || this.options.outdentAll) {
+          $cell.classList.add('mc-bar-outdented')
+          $cellSpan.style.marginLeft = '100%'
+          $cellSpan.style.display = 'inline-block'
         } else {
-          $cell.addClass('mc-bar-indented')
+          $cell.classList.add('mc-bar-indented')
         }
       } else {
         // if it's a stacked graph
         if (spanWidth > cellWidth && cellVal > 0) {
-          $cell.addClass('mc-value-overflow')
+          $cell.classList.add('mc-value-overflow')
         }
       }
-    })
+    }
   }
 
-  $.magnaCharta = function (table, options) {
-    return new MagnaCharta().init(table, options)
-  }
-}(jQuery))
+  Modules.MagnaCharta = MagnaCharta
+})(window.GOVUK.Modules)
diff --git a/spec/javascripts/govuk_publishing_components/lib/govspeak/magna-charta-spec.js b/spec/javascripts/govuk_publishing_components/lib/govspeak/magna-charta-spec.js
index a0ffbed818..6d623300a8 100644
--- a/spec/javascripts/govuk_publishing_components/lib/govspeak/magna-charta-spec.js
+++ b/spec/javascripts/govuk_publishing_components/lib/govspeak/magna-charta-spec.js
@@ -1,10 +1,14 @@
 /* eslint-env jasmine, jquery */
+/* global GOVUK */
 
 describe('Magna charta', function () {
   'use strict'
 
   var element
   var magna
+  var graph
+  var table
+  var toggle
 
   // widths are 65/max * val (65 by default)
   var cW = function (max, val, padding) {
@@ -101,7 +105,10 @@ describe('Magna charta', function () {
     beforeEach(function () {
       element = $('<div/>').attr('id', 'test-magna-charta').html(single)
       $('body').append(element)
-      magna = $.magnaCharta(element.find('#single'))
+      magna = new GOVUK.Modules.MagnaCharta().start(element.find('#single')[0], { returnReference: true })
+      graph = element.find('.mc-chart')
+      table = element.find('table')
+      toggle = element.find('.mc-toggle-link')
     })
 
     afterEach(function () {
@@ -109,70 +116,66 @@ describe('Magna charta', function () {
     })
 
     it('creates a new div containing the chart', function () {
-      expect(magna.$graph.length).toEqual(1)
-    })
-
-    it('the new chart div has a class mc-chart', function () {
-      expect(magna.$graph).toHaveClass('mc-chart')
+      expect(graph.length).toBe(1)
     })
 
     it('the new chart copies over any other classes', function () {
-      expect(magna.$graph).toHaveClass('no-key')
+      expect(graph).toHaveClass('no-key')
     })
 
     it('running toggle switches between chart and table', function () {
-      magna.toggle()
-      expect(magna.$table).not.toHaveClass('visually-hidden')
-      expect(magna.$graph.filter(':visible').length).toBe(0)
+      toggle[0].click()
+      expect(table).not.toHaveClass('visually-hidden')
+      expect(graph).toHaveClass('visually-hidden')
 
       // toggle it back
-      magna.toggle()
-      expect(magna.$table).toHaveClass('visually-hidden')
-      expect(magna.$graph.filter(':visible').length).toBe(1)
+      toggle[0].click()
+      expect(table).toHaveClass('visually-hidden')
+      expect(graph).not.toHaveClass('visually-hidden')
     })
 
     it('new chart div contains all table bits as divs', function () {
-      expect(magna.$graph.find('.mc-thead').length).toBe(1)
-      expect(magna.$graph.find('.mc-tr').length).toBe(4)
-      expect(magna.$graph.find('.mc-th').length).toBe(2)
-      expect(magna.$graph.find('.mc-td').length).toBe(6)
+      expect(graph.find('.mc-thead').length).toBe(1)
+      expect(graph.find('.mc-tr').length).toBe(4)
+      expect(graph.find('.mc-th').length).toBe(2)
+      expect(graph.find('.mc-td').length).toBe(6)
     })
 
     it('new chart divs contain the right values', function () {
-      var cells = magna.$graph.find('.mc-td')
+      var cells = graph.find('.mc-td')
       expect(cells.eq(0).text()).toBe('Testing One')
       expect(cells.eq(1).text()).toBe('5')
-      expect(magna.$graph.find('.mc-th').eq(0).text()).toBe('Some Data')
+      expect(graph.find('.mc-th').eq(0).text()).toBe('Some Data')
     })
 
     it('figures out the maximum graph value', function () {
-      var test = magna.calculateMaxWidth()
+      var test = magna.dimensions
       expect(test.max).toBe(parseFloat(5, 10))
       expect(test.single).toBe(parseFloat(65 / 5, 10))
     })
 
     it('divs that are bars or keys are given correct classes', function () {
-      expect(magna.$graph.find('.mc-key-cell').length).toBe(3)
-      expect(magna.$graph.find('.mc-bar-cell').length).toBe(3)
+      expect(graph.find('.mc-key-cell').length).toBe(3)
+      expect(graph.find('.mc-bar-cell').length).toBe(3)
     })
 
     it('bar cells have their values wrapped in a span tag', function () {
-      expect(magna.$graph.find('.mc-bar-cell span').length).toBe(3)
+      expect(graph.find('.mc-bar-cell span').length).toBe(3)
     })
 
     it('bars are given the correct width', function () {
-      var bars = magna.$graph.find('.mc-bar-cell')
+      var bars = graph.find('.mc-bar-cell')
       expect(bars.get(0).style.width).toBe(cW(5, 5))
       expect(bars.get(1).style.width).toBe(cW(5, 4))
       expect(bars.get(2).style.width).toBe(cW(5, 3))
     })
 
     it('new chart is inserted into DOM after table', function () {
-      expect(magna.$table.next()).toHaveClass('mc-chart')
+      expect(table.next()).toHaveClass('mc-chart')
     })
 
     it('bars are given classes to track what number they are', function () {
-      magna.$graph.find('.mc-bar-cell').each(function (i, item) {
+      graph.find('.mc-bar-cell').each(function (i, item) {
         expect($(item)).toHaveClass('mc-bar-1')
       })
     })
@@ -182,7 +185,9 @@ describe('Magna charta', function () {
     beforeEach(function () {
       element = $('<div/>').attr('id', 'test-magna-charta').html(multiple2)
       $('body').append(element)
-      magna = $.magnaCharta(element.find('#multiple2'))
+      magna = new GOVUK.Modules.MagnaCharta().start(element.find('#multiple2')[0], { returnReference: true })
+      graph = element.find('.mc-chart')
+      table = element.find('table')
     })
 
     afterEach(function () {
@@ -190,7 +195,7 @@ describe('Magna charta', function () {
     })
 
     it('the graph of a multiple table is given a class', function () {
-      expect(magna.$graph).toHaveClass('mc-multiple')
+      expect(graph).toHaveClass('mc-multiple')
       expect(magna.options.multiple).toBe(true)
     })
   })
@@ -199,7 +204,9 @@ describe('Magna charta', function () {
     beforeEach(function () {
       element = $('<div/>').attr('id', 'test-magna-charta').html(multiple)
       $('body').append(element)
-      magna = $.magnaCharta(element.find('#multiple'))
+      magna = new GOVUK.Modules.MagnaCharta().start(element.find('#multiple')[0], { returnReference: true })
+      graph = element.find('.mc-chart')
+      table = element.find('table')
     })
 
     afterEach(function () {
@@ -211,20 +218,20 @@ describe('Magna charta', function () {
     })
 
     it('the cells that become bars are given the right classes', function () {
-      expect(magna.$graph.find('.mc-bar-cell').length).toBe(6) // bar cells
-      expect(magna.$graph.find('.mc-key-cell').length).toBe(3) // key cells
-      expect(magna.$graph.find('.mc-stacked-total').length).toBe(3) // total cells
+      expect(graph.find('.mc-bar-cell').length).toBe(6) // bar cells
+      expect(graph.find('.mc-key-cell').length).toBe(3) // key cells
+      expect(graph.find('.mc-stacked-total').length).toBe(3) // total cells
     })
 
     it('header cells get the right values', function () {
-      var head = magna.$graph.find('.mc-thead')
+      var head = graph.find('.mc-thead')
       expect(head.find('.mc-stacked-header').length).toBe(1)
       expect(head.find('.mc-th').eq(1)).toHaveClass('mc-key-1')
       expect(head.find('.mc-key-header').length).toBe(2)
     })
 
     it('the bar cells are given the right widths', function () {
-      var cells = magna.$graph.find('.mc-bar-cell')
+      var cells = graph.find('.mc-bar-cell')
       expect(cells.get(0).style.width).toEqual(cW(12, 5))
       expect(cells.get(1).style.width).toEqual(cW(12, 6))
       expect(cells.get(2).style.width).toEqual(cW(12, 6))
@@ -234,7 +241,7 @@ describe('Magna charta', function () {
     })
 
     it('the bar cells are given classes denoting their index', function () {
-      var rows = magna.$graph.find('.mc-tbody .mc-tr')
+      var rows = graph.find('.mc-tbody .mc-tr')
       rows.each(function (_, row) {
         var cells = $(row).find('.mc-bar-cell')
         cells.each(function (i, cell) {
@@ -254,9 +261,12 @@ describe('Magna charta', function () {
     beforeEach(function () {
       element = $('<div/>').attr('id', 'test-magna-charta').html(negative2)
       $('body').append(element)
-      magna = $.magnaCharta(element.find('#negative2'), {
-        applyOnInit: false
+      magna = new GOVUK.Modules.MagnaCharta().start(element.find('#negative2')[0], {
+        applyOnInit: false,
+        returnReference: true
       })
+      graph = element.find('.mc-chart')
+      table = element.find('table')
     })
 
     afterEach(function () {
@@ -264,14 +274,14 @@ describe('Magna charta', function () {
     })
 
     it('doesnt show the chart initially', function () {
-      expect(magna.$graph.filter(':visible').length).toBe(0)
-      expect(element.find('#negative2')).not.toHaveClass('visually-hidden')
+      expect(table).not.toHaveClass('visually-hidden')
+      expect(graph).toHaveClass('visually-hidden')
     })
 
     it('graph is shown when toggle is called', function () {
-      magna.toggle()
-      expect(magna.$graph.filter(':visible').length).toBe(1)
-      expect(element.find('#negative2')).toHaveClass('visually-hidden')
+      element.find('.mc-toggle-link')[0].click()
+      expect(table).toHaveClass('visually-hidden')
+      expect(graph).not.toHaveClass('visually-hidden')
     })
   })
 
@@ -279,7 +289,9 @@ describe('Magna charta', function () {
     beforeEach(function () {
       element = $('<div/>').attr('id', 'test-magna-charta').html(negative)
       $('body').append(element)
-      magna = $.magnaCharta(element.find('#negative'))
+      magna = new GOVUK.Modules.MagnaCharta().start(element.find('#negative')[0], { returnReference: true })
+      graph = element.find('.mc-chart')
+      table = element.find('table')
     })
 
     afterEach(function () {
@@ -291,12 +303,12 @@ describe('Magna charta', function () {
     })
 
     it('cells are given positive and negative classes', function () {
-      expect(magna.$graph.find('.mc-bar-negative').length).toBe(2)
-      expect(magna.$graph.find('.mc-bar-positive').length).toBe(2)
+      expect(graph.find('.mc-bar-negative').length).toBe(2)
+      expect(graph.find('.mc-bar-positive').length).toBe(2)
     })
 
     it('cells are given the right width', function () {
-      var cells = magna.$graph.find('.mc-bar-cell')
+      var cells = graph.find('.mc-bar-cell')
       expect(cells.get(0).style.width).toEqual(cW(10, 5))
       expect(cells.get(1).style.width).toEqual(cW(10, 10))
       expect(cells.get(2).style.width).toEqual(cW(10, 10))
@@ -304,7 +316,7 @@ describe('Magna charta', function () {
     })
 
     it('positive cells are given a left margin to align them with negative cells', function () {
-      var cells = magna.$graph.find('.mc-bar-positive')
+      var cells = graph.find('.mc-bar-positive')
       expect(cells.get(0).style.marginLeft).toEqual(cW(10, 10))
     })
 
@@ -322,7 +334,9 @@ describe('Magna charta', function () {
     beforeEach(function () {
       element = $('<div/>').attr('id', 'test-magna-charta').html(outdentAll)
       $('body').append(element)
-      magna = $.magnaCharta(element.find('#outdent-all'))
+      magna = new GOVUK.Modules.MagnaCharta().start(element.find('#outdent-all')[0], { returnReference: true })
+      graph = element.find('.mc-chart')
+      table = element.find('table')
     })
 
     afterEach(function () {
@@ -330,7 +344,7 @@ describe('Magna charta', function () {
     })
 
     it('all cell values are pushed left', function () {
-      magna.$graph.find('.mc-bar-cell span').each(function (i, item) {
+      graph.find('.mc-bar-cell span').each(function (i, item) {
         expect(item.style.marginLeft).toBe('100%')
       })
     })
@@ -340,7 +354,9 @@ describe('Magna charta', function () {
     beforeEach(function () {
       element = $('<div/>').attr('id', 'test-magna-charta').html(single)
       $('body').append(element)
-      magna = $.magnaCharta(element.find('#single'))
+      magna = new GOVUK.Modules.MagnaCharta().start(element.find('#single')[0], { returnReference: true })
+      graph = element.find('.mc-chart')
+      table = element.find('table')
     })
 
     afterEach(function () {