1👍
Looking at your code I see a couple things that I’d suggest you to change:
- Use the
data.labelsattribute to define the xAxes values:
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: [
new Date("2020-07-01T00:00:00.000Z").toLocaleDateString(),
...
...
new Date("2020-07-31T00:00:00.000Z").toLocaleDateString()
You should define all the labels from the min to max value of xAxes.
If you wanna format your Date you can use the native date format methods available (as the one I used as example), or even use a library like moment.js to manage the formatting: Moment.js Documentation
Now depending on the output chart you want:
Stacked yAxes
- You can remove the following xAxes block from
options.scales:
xAxes: [{
type: 'time',
time: {
unit: 'day'
},
distribution: 'series',
offset: true,
ticks: {
major: {
enabled: true,
fontStyle: 'bold'
},
source: 'data',
autoSkip: true,
autoSkipPadding: 75,
maxRotation: 0,
sampleSize: 100
}
}]
Then your output should be a proper yAxes stacked line chart like this:
Note: The xAxes only shows two values because I only added those on data.labels, but as I mentioned earlier you should add all values there.
Stacked xAxes
- You can remove the following yAxes block from
option.scales:
yAxes: [{
stacked: false
}]
Then your output should be a chart like this:
1👍
I think you did nothing wrong but doubt the current stable version of Chart.js (2.9.3) can handle this case (see this issue). The stacking is apparently done on values with same index from different datasets, and the x value (the time) is ignored.
The good news is that Chart.js 3.0.0-alpha.2 seems to render such charts as one would expect. The problem however is that vue-chartjs wrapper probably doesn’t work together with Chart.js 3.0 yet. Therefore, you’ll have to use the Chart.js library directly in your project.
Please have a look at your amended code below.
new Chart('myChart', {
type: "line",
data: {
datasets: [
{
label: "TEST",
backgroundColor: "#ffadad",
data: [
{ x: "2020-07-01T00:00:00.000Z", y: 0.4 },
{ x: "2020-07-02T00:00:00.000Z", y: 0.4 }
]
},
{
label: "Deuxième projet",
backgroundColor: "#ffd6a5",
data: [
{ x: "2020-07-03T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-04T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-05T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-06T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-07T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-08T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-09T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-10T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-11T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-12T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-13T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-14T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-15T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-16T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-17T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-18T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-19T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-20T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-21T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-22T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-23T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-24T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-25T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-26T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-27T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-28T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-29T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-30T00:00:00.000Z", y: 0.6 }
]
},
{
label: "Premier project",
backgroundColor: "#fdffb6",
data: [
{ x: "2020-06-25T00:00:00.000Z", y: 0.5 },
{ x: "2020-06-26T00:00:00.000Z", y: 0.5 },
{ x: "2020-06-27T00:00:00.000Z", y: 0.5 },
{ x: "2020-06-28T00:00:00.000Z", y: 0.5 },
{ x: "2020-06-29T00:00:00.000Z", y: 0.5 },
{ x: "2020-06-30T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-01T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-02T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-03T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-04T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-05T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-06T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-07T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-08T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-09T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-10T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-11T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-12T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-13T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-14T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-15T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-16T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-17T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-18T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-19T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-20T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-21T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-22T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-23T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-24T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-25T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-26T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-27T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-28T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-29T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-30T00:00:00.000Z", y: 0.5 },
{ x: "2020-07-31T00:00:00.000Z", y: 0.5 }
]
}
]
},
options: {
animation: {
duration: 500
},
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
tooltips: {
mode: "x",
intersect: false
},
scales: {
y: {
stacked: true,
min: 0
},
x: {
type: "time",
distribution: "linear",
time: {
displayFormats: {
day: "MMM DD"
},
tooltipFormat: "MMM DD"
},
ticks: {
major: {
enabled: true,
fontStyle: "bold"
},
source: "data",
autoSkip: true,
autoSkipPadding: 75,
maxRotation: 0,
sampleSize: 100
}
}
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-alpha.2/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.2/dist/chartjs-adapter-moment.min.js"></script>
<canvas id="myChart"></canvas>Please consult the Chart.js 3.x Migration Guide in case you consider to migrate your 2.n charts to version 3.0.
1👍
here is the answer
https://codesandbox.io/s/chartjs-8sj7l?file=/src/index.js
see below you have three datapoints in all three lines.
Then it will be stacked.
Every project must have equal number of rows for x and y variables.
if duexi project has 2 rows and premier project has 3 rows then it cannot be stacked.
data: [
{ x: "2020-06-30T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-01T00:00:00.000Z", y: 0.4 },
{ x: "2020-07-02T00:00:00.000Z", y: 0.4 }
]
},
{
label: "Deuxième projet",
backgroundColor: "",
data: [
{ x: "2020-06-30T00:00:00.000Z", y: 0.2 },
{ x: "2020-07-01T00:00:00.000Z", y: 0.4 },
{ x: "2020-07-02T00:00:00.000Z", y: 0.4 }
]
},
{
label: "Premier project",
backgroundColor: "",
data: [
{ x: "2020-06-30T00:00:00.000Z", y: 0.6 },
{ x: "2020-07-01T00:00:00.000Z", y: 0.4 },
{ x: "2020-07-02T00:00:00.000Z", y: 0.4 }
]
}
You have same labels for multiple days. so I changed setting for chart.
You have unequal datapoints too.
test has two data points others have multiple.
In order to create a line your all three lines should have equal data points.
you can add zeros and create three lines
your one line is 2 datap oint and shortest and other has 12 datap oints