Chart.js xAxis time: This method is not implemented: either


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?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • 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