Chart.js: Chart v3.0.0-rc.5 - Object [] using custom properties sort order x-axis error
Expected Behavior
Why is the order of the X-axis not as it was defined in the options?
Since I do not always have a value for the defined time span (x-axis) for all series, I would like to use an “Object [] using custom properties” as the data source.
Unfortunately that doesn’t work or I don’t know how to set this up so that the order of the X-axis values is displayed correctly.
Current Behavior

Possible Solution
???
Context
{
"type": "line",
"data": {
"datasets": [
{
"label": "Peter Muskeln",
"pointRadius": 0,
"parsing": {
"yAxisKey": "y"
},
"yAxisID": "left",
"type": "line",
"backgroundColor": "rgba(115,210,22,0.85)",
"borderColor": "rgba(115,210,22,0.85)",
"data": [
{
"x": "03.21",
"y": "52.110"
},
{
"x": "03.22",
"y": "52.140"
},
{
"x": "03.23",
"y": "52.190"
},
{
"x": "03.24",
"y": "52.160"
},
{
"x": "03.25",
"y": "52.210"
},
{
"x": "03.26",
"y": "52.350"
}
]
},
{
"label": "Peter Gewicht",
"pointRadius": 0,
"mode": "history",
"parsing": {
"yAxisKey": "y"
},
"yAxisID": "left",
"type": "line",
"backgroundColor": "#03a9f4",
"borderColor": "#03a9f4",
"data": [
{
"x": "03.20",
"y": "68.850"
},
{
"x": "03.21",
"y": "69.200"
},
{
"x": "03.22",
"y": "68.750"
},
{
"x": "03.23",
"y": "69.000"
},
{
"x": "03.24",
"y": "69.050"
},
{
"x": "03.25",
"y": "69.050"
},
{
"x": "03.26",
"y": "68.600"
}
]
},
{
"label": "Peter BMI",
"pointRadius": 0,
"mode": "history",
"parsing": {
"yAxisKey": "y"
},
"yAxisID": "right",
"type": "bar",
"fill": true,
"backgroundColor": "#e74c3c",
"labelcolor": "#e74c3c",
"borderColor": "#e74c3c",
"data": [
{
"x": "03.21",
"y": "22.600"
},
{
"x": "03.22",
"y": "22.450"
},
{
"x": "03.23",
"y": "22.530"
},
{
"x": "03.24",
"y": "22.550"
},
{
"x": "03.26",
"y": "22.400"
}
]
}
]
},
"options": {
"units": "",
"layout": {},
"chartArea": {
"backgroundColor": "transparent"
},
"hover": {
"mode": "nearest",
"intersect": true
},
"elements": {},
"spanGaps": true,
"plugins": {
"gradient": {
"id": "gradient"
},
"legend": {
"position": "top",
"display": true
}
},
"animation": {},
"onResize": null,
"scales": {
"left": {
"id": "left",
"type": "linear",
"position": "left",
"display": true,
"scaleLabel": {
"display": true,
"labelString": "Gewicht / Muskeln"
},
"ticks": {
"autoSkip": true,
"maxTicksLimit": 12
}
},
"right": {
"id": "right",
"type": "linear",
"position": "right",
"display": true,
"gridLines": {
"borderDash": [2, 5],
"drawOnChartArea": false
},
"scaleLabel": {
"display": true,
"labelString": "BMI"
},
"ticks": {
"autoSkip": true,
"maxTicksLimit": 16
}
},
"x": {
"scaleLabel": {
"display": true,
"labelString": "Zeitraum"
}
}
}
}
}
Environment
- Chart.js version: v3.0.0-rc.5
- Browser name and version: any
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 15 (7 by maintainers)
@etimberg Thanks for your help 💯 it works…