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

Bildschirmfoto 2021-03-26 um 18 07 55

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)

Most upvoted comments

@etimberg Thanks for your help 💯 it works…