6👍
✅
Since you specified the x/y
coordinates of your data set, you have to set your xAxes
scale type as time
in your chart options.
var options = {
scales: {
xAxes: [
{
type: "time"
}
]
}
};
See official docs for all possible configurations or check the options used in the working example below.
Important: You have to change the date format in your data set to something like 'YYYY-MM-DD'
otherwise moment
would throw this warning.
Deprecation warning: value provided is not in a recognized RFC2822 or
ISO format. moment construction falls back to js Date(), which is not
reliable across all browsers and versions.
var data = {
labels: [
"2018-10-29",
"2018-10-30",
"2018-11-02",
"2018-11-14",
"2018-11-15",
"2018-11-19",
"2018-11-20",
"2018-11-28"
],
datasets: [{
pointRadius: 0,
label: "Positive",
lineTension: 0,
data: [{
x: "2018-11-15",
y: 18636
}],
borderWidth: 1,
backgroundColor: "rgba(0, 255, 0, 0.5)"
},
{
pointRadius: 0,
label: "Negative",
lineTension: 0,
data: [{
x: "2018-10-29",
y: -20480
},
{
x: "2018-10-30",
y: -284
},
{
x: "2018-11-02",
y: -1625
},
{
x: "2018-11-14",
y: -6622
},
{
x: "2018-11-15",
y: -12991
},
{
x: "2018-11-19",
y: -1645
},
{
x: "2018-11-20",
y: -1230
},
{
x: "2018-11-28",
y: -39612
}
],
borderWidth: 1,
backgroundColor: "rgba(255, 0, 0, 0.5)"
}
]
};
var options = {
scales: {
xAxes: [{
type: "time",
distribution: 'series',
time: {
displayFormats: {
day: 'D MMM, YY'
}
},
ticks: {
source: "labels"
},
gridLines: {
display: false
}
}]
}
};
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: "bar",
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart" width="300" height="100"></canvas>
Source:stackexchange.com