Topic: Chart.js xAxis time: This method is not implemented: either no adapter can be found
dimitribocquet pro asked 6 years ago
Hello,
I'm trying to make a line chart with xAxis time scale, as followed on chart.js example : https://www.chartjs.org/samples/latest/scales/time/line.html
So I did the simple example (https://github.com/chartjs/Chart.js/blob/master/samples/scales/time/line.html) and adapted it to make it work with MDB. But I have this error message :
This method is not implemented: either no adapter can be found or an incomplete integration was provided.
I use moment.js in my project so I think the adapter is found (but maybe I missed something to using it with chart.js, i d'ont know).
Please could you help me to make it work? Thank you a lot.
Here is my code :
HTML :
<canvas mdbChart
chartType="line"
[datasets]="chartDatasets"
[labels]="chartLabels"
[colors]="chartColors"
[options]="chartOptions"
[legend]="false"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">
</canvas>
TS :
// Chart
public chartDatasets: Array<any> = [
{
label: '',
data: [
{
x: moment().add(0, 'd').format('DD/MM/YYYY'),
y: 1
},
{
x: moment().add(1, 'd').format('DD/MM/YYYY'),
y: 10
},
],
fill: false,
},
];
public chartLabels: Array<any> = [
moment().add(0, 'd').toDate(),
moment().add(5, 'd').toDate()
];
public chartColors: Array<any> = [
{
backgroundColor: 'rgba(105, 0, 132, .2)',
borderColor: 'rgba(200, 99, 132, .7)',
pointRadius: 10,
borderWidth: 2,
showLine: false,
}
];
public chartOptions: any = {
responsive: true,
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'DD/MM/YYYY',
// round: 'day'
tooltipFormat: 'll HH:mm'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
};
public chartClicked(e: any): void { }
public chartHovered(e: any): void { }
dimitribocquet pro answered 5 years ago
I found the problem when I reproduced the bug on a blank project.
I just had to add momentjs in angular.json :
"scripts": [
"node_modules/moment/moment.js",
"node_modules/chart.js/dist/Chart.js",
...
]
Not it's working as expected !
Arkadiusz Idzikowski staff answered 6 years ago
Hello,
I can't reproduce this problem with the provided code. Could you send a simple demo with that example to a.idzikowski@mdbootstrap.com?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.3
- Device: Macbook Pro
- Browser: Chrome
- OS: OSX
- Provided sample code: No
- Provided link: Yes