Chartist-js: Cannot read property 'querySelectorAll' of null

Created on 27 Dec 2015 · 5Comments · Source: gionkunz/chartist-js

It's really strange, chartist was working fine for me a few days ago but suddenly nothing works.
I copy pasted most of the below code from the official website, so I don't think the error is on my part, but I can't be sure.
I'm getting the same error on all browsers, on both minified and unminified versions of chartist, and on both npm and CDN versions of chartist.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Data Chart</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
  <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
  <script src="chart.js"></script>
</head>
<body>
  <div class="ct-chart ct-perfect-fourth"></div>
</body>
</html>

chart.js

var data = {
  // A labels array that can contain any sort of values
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  // Our series array that contains series objects or in this case series data arrays
  series: [
    [5, 2, 4, 2, 0]
  ]
};

// Create a new line chart object where as first parameter we pass in a selector
// that is resolving to our chart container element. The Second parameter
// is the actual data object. As a third parameter we pass in our custom options.
new Chartist.Bar('.ct-chart', data);

Source

prashcr

Most helpful comment

My bad, the script tags were supposed to be at the end of body, not in head.

prashcr on 27 Dec 2015

👍2 😄1

All 5 comments

Line 313 in the unminified chartist.js is where the error occurs

Array.prototype.slice.call(container.querySelectorAll('svg')).filter(function filterChartistSvgObjects(svg) {

prashcr on 27 Dec 2015

My bad, the script tags were supposed to be at the end of body, not in head.

prashcr on 27 Dec 2015

👍2 😄1

To clarify, listening for either DOMContentLoaded or load before calling new Charist('myselector', ...) should work, correct? I'm using $(document).ready(function(){ myLoadCharistFunc(); }); but still occasionally getting this error in Chrome browsers.

rattrayalex on 6 Feb 2016

Sorry, turns out the elements were not, in fact, on the page at all.

A more helpful error message (as mentioned in https://github.com/gionkunz/chartist-js/issues/85 ) would be nice though :-)

rattrayalex on 6 Feb 2016

I had a really dumb error that caused this error message. The div I was trying to change into a graph I had as div id="#all_results" which obviously should have been div id="all_results". Moral of the story, check to make sure you have things named properly, etc because it'll trigger this message.