chartist
chartist copied to clipboard
chartist-js
Uncaught ReferenceError: Chartist is not defined
Requiring from npm. Using with webpack. Receives "Uncaught ReferenceError: Chartist is not defined"
Trying with
require('chartist')
new Chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});
Trying also with import. Same result.
Did you ever figure this out? I'm encountering the same error message within Electron (which is node based), when using the conventional <script src="path/to/chartist.js"> in the webpage.
Requiring from npm. Using with webpack. Receives "Uncaught ReferenceError: Chartist is not defined"
Trying with
require('chartist') new Chartist.Line('.ct-chart', { labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], series: [ [12, 9, 7, 8, 5], [2, 1, 3.5, 7, 3], [1, 3, 4, 5, 6] ] }, { fullWidth: true, chartPadding: { right: 40 } });Trying also with import. Same result.
Hi, found same problem. But here what I'm done:
Try to place script call to <script src="path/or/CDN/to/chartist.js"> before your data.
Or just place it inside the <head> ... </head> tag and your script inside <body> ... </body> tag.
For your code above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bower_components/chartist/dist/chartist.min.css">
<title>Document</title>
</head>
<body>
<!-- Html tag for displaying chart -->
<div class="ct-chart ct-golden-section"></div>
<!-- The library goes first before your paramameter setup -->
<script src="bower_components/chartist/dist/chartist.min.js"></script>
<!-- Your script -->
<script>
/* require('chartist') */ /*<<== removed */
new Chartist.Line('.ct-chart', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
fullWidth: true,
chartPadding: {
right: 40
}
});
</script>
</body>
</html>
Btw, Chartistjs is more simple than others for me who only need displaying simple chart on html. I love this.
