Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Chart v3.0.0-rc.5 - Object [] using custom properties sort order x-axis error
See original GitHub issueExpected 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
Issue Analytics
- State:
- Created 2 years ago
- Comments:15 (7 by maintainers)
Top Results From Across the Web
ng2-charts | Yarn - Package Manager
Reactive, responsive, beautiful charts for Angular based on Chart.js ... NG0303: Can't bind to 'type' since it isn't a known property of 'canvas'...
Read more >React, sorting X-axis label in Rechart in from different data ...
first sort out the data coming from your database; or sort the entire array it by key value (in ascending or descending order)....
Read more >Array.prototype.sort() - JavaScript - MDN Web Docs
The sort() method sorts the elements of an array in place and returns the reference to the same array, now sorted. The default...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@etimberg Thanks for your help 💯 it works…
It’s new in v3, https://www.chartjs.org/docs/master/configuration/interactions.html