Resolved on update 26-04-2021 (see below)
I have encountered difficulties with defining the x-axis on Charts.js version 3.1.0.
Time is formatted in ISO standard (javascript so): '2021-04-12T01:51:40'
Chart configuration options.scaled[scaledId] for the x-axis can only be an array (contrary to what is described in the documentation). It seems that defining an array does not apply the custom x-axis configuration.
I attempted to define the x-axis options.scaled[x] as an object but it results in the following error:
Uncaught Error: This method is not implemented: either no adapter can be found or an incomplete integration was provided.
Uncaught TypeError: Cannot read property 'left' of undefined
Has anyone else experienced this issue and/or have any ideas about it?
Sample code:
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aaa1a8bbbde7a3ba89fae7f8e7f9">[email protected]</a>/dist/chart.min.js'></script>
<script>
var config = {
type: 'line',
data: {
datasets: [
{
label: 'RENAULT TWINGO',
borderColor: 'rgb(255, 99, 132)',
data: [
{x: '2021-04-11T01:51:40', y: 132},
{x: '2021-04-12T03:57:03', y: 102}
],
},
{
label: 'CITROEN C3',
borderColor: 'rgb(54, 162, 235)',
data: [
{x: '2021-04-11T01:51:40', y: 123},
{x: '2021-04-12T03:57:03', y: 143}
],
},
],
},
options: {
plugins: {
title: {
display: true,
text: 'Prix des voitures',
}
},
responsive: true,
scales: {
x: [{
axis: 'x',
type: 'timeseries',
title: {
display: true,
text: 'Temps',
},
ticks: {
source: 'data'
},
time: {
// parser: 'YYYY-MM-DDTHH:mm:ss',
unit: 'day',
displayFormats: {
'day': 'DD/MM'
},
},
}],
y: {
axis: 'y',
type: 'linear',
title: {
display: true,
text: 'Prix',
},
beginAtZero: true,
},
}
}
}
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, config);
</script>
and its result: https://i.sstatic.net/DyUaH.png
The expected outcome should be the date formatted as DD/MM (e.g. 11/04 and 12/04).
Updated on 26-04-2021
A library for date formatting AND the associated adapter were missing.
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd909290989389bdcfd3cfcad3cd">[email protected]</a>"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7848f8695938d94ca86838697938295ca8a888a828993a7d7c9d6c9d6">[email protected]</a>"></script>
As a result, assigning objects for the x-axis now works correctly.
scales: {
x: {
axis: 'x',
type: 'time',
time: {
parser: 'YYYY-MM-DDTHH:mm:ss',
unit: 'minute',
displayFormats: {
'minute': 'DD-MM HH:mm'
},
},
}
}