data: {
labels: ['29 Oct, 18', '30 Oct, 18', '02 Nov, 18', '14 Nov, 18', '15 Nov, 18', '19 Nov, 18', '20 Nov, 18', '28 Nov, 18'],
datasets: [{
pointRadius: 0,
label: 'Positive',
lineTension: 0,
data: [{'x': '15 Nov, 18', 'y': 18636}],
borderWidth: 1,
backgroundColor: 'rgba(0, 255, 0, 0.5)',
},{
pointRadius: 0,
label: 'Negative',
lineTension: 0,
data: [{'x': '29 Oct, 18', 'y': -20480}, {'x': '30 Oct, 18', 'y': -284}, {'x': '02 Nov, 18', 'y': -1625}, {'x': '14 Nov, 18', 'y': -6622}, {'x': '15 Nov, 18', 'y': -12991}, {'x': '19 Nov, 18', 'y': -1645}, {'x': '20 Nov, 18', 'y': -1230}, {'x': '28 Nov, 18', 'y': -39612}],
borderWidth: 1,
backgroundColor: 'rgba(255, 0, 0, 0.5)',
}]
},
The problem is that the green bar is at the wrong x position. It is currently at '29 okt' but I tagged it with '15 nov'
How do I set those datasets to the correct x position
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.