I successfully created a chart with charts.js and configured it, but now I aim to make the X Axis represent time. However, when attempting to implement this using the code below, I encounter the following console error: Uncaught ReferenceError: moment is not defined. I am using chart.bundle.min.js which is supposed to include moment.js, so I shouldn't have to separately download and link moment.js.
Here is the code snippet borrowed from a stack member who answered a question regarding the time axis:
function newDate(days)
{
return moment().add(days, 'd'); //THE ISSUE ACCORDING TO CONSOLE OCCURS HERE.
};
var config =
{
type: 'line',
data:
{
//Calling the function here also triggers an error in the console.
labels: [newDate(-4), newDate(-3), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)],
datasets:
[{
label: "My First dataset",
data: [4, 3, 1, 4],
}]
},
options:
{
scales:
{
xAxes:
[{
type: 'time',
unit: 'month',
}],
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
HTML:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/customFitStyling.css" type="text/css">
<link rel="stylesheet" href="css/w3c_v4.css" type="text/css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/chart.bundle.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>