Lightrun
question-mark
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: Time Cartesian Axis - w/o Date Adapters ???

See original GitHub issue

Feature Proposal

I am looking for a way to use Time Cartesian Axis without a date adapter, because I have not found a way in the Home Assistant framework how I can use locale files for the adapter. Also I have my concerns, just to display the date / time in the user language, to use the date libs (moment, luxon, date-fn) for it.

I have different data sources that don’t always have data for every time interval. It is possible to create a timeseries for Category Cartesian Axis for all data, but then my performance is poor, since many data always have 0 values.

Bildschirmfoto 2021-04-02 um 11 02 33

Most likely I could use the chartjs-adapter-date-fns, but I can display the date and time in the user language.

What is my option?

The dataset contains the following data:

X-Axis: Date Y-Axis: Value

[
    {
        "x": 1617253200000,
        "y": 0.117,
    },
    {
        "x": 1617256800000,
        "y": 0.249,
    },
    {
        "x": 1617260400000,
        "y": 2.068,
    },
    ....

Feature Use Case

Time axis Ticks label (x) formatted and Tooltips date / time in the user language.

Possible Implementation

???

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:28 (13 by maintainers)

github_iconTop GitHub Comments

1reaction
zibouscommented, Apr 4, 2021

This is fixed by #8822, and will be available in 3.1

Thanks, works now.

0reactions
zibouscommented, Apr 5, 2021

@kurkle

timeseries the grid columns are too big at the beginning and at the end or am I making a mistake?

Bildschirmfoto 2021-04-05 um 10 25 30

**
 * format the x-axis date/time label
 * @param {*} tickValue
 * @param {*} index
 * @param {*} ticks
 * @returns formatted tick value
 */
 function xAxisFormat(tickValue, index, ticks) {
    console.log("xAxisFormat", this.options)
    if (this && this.options.time && this.options.time.unit) {
        const dateFormatPattern = this.options.time.unit
        if (dateFormatPattern && Number.isInteger(ticks[index].value)) {
            return formatdate(+ticks[index].value, dateFormatPattern)
        }
    }
    return tickValue
}


{
    "type": "bar",
    "data": {
        "datasets": [
            {
                "label": "Verbrauch",
                "unit": "kWh",
                "minval": 0,
                "maxval": 0,
                "sumval": 0,
                "avgval": 0,
                "pointRadius": 0,
                "current": -0.6300000000000001,
                "last_changed": "2021-04-04T13:45:19.303440+00:00",
                "mode": "history",
                "backgroundColor": "#FF8066",
                "data": [
                    {
                        "x": 1617055200000,
                        "localedate": "2021-03-30",
                        "y": -128.12
                    },
                    {
                        "x": 1617141600000,
                        "localedate": "2021-03-31",
                        "y": -160.55
                    },
                    {
                        "x": 1617228000000,
                        "localedate": "2021-04-01",
                        "y": -153.49
                    },
                    {
                        "x": 1617314400000,
                        "localedate": "2021-04-02",
                        "y": -142.32
                    },
                    {
                        "x": 1617400800000,
                        "localedate": "2021-04-03",
                        "y": -189.55
                    },
                    {
                        "x": 1617487200000,
                        "localedate": "2021-04-04",
                        "y": -75.08
                    }
                ]
            },
            {
                "label": "Energieproduktion",
                "unit": "kWh",
                "minval": 0,
                "maxval": 0,
                "sumval": 0,
                "avgval": 0,
                "pointRadius": 0,
                "current": 0,
                "last_changed": "2021-04-04T13:45:17.876805+00:00",
                "mode": "history",
                "backgroundColor": "#fcec34",
                "data": [
                    {
                        "x": 1617055200000,
                        "localedate": "2021-03-30",
                        "y": 99.891
                    },
                    {
                        "x": 1617141600000,
                        "localedate": "2021-03-31",
                        "y": 94.916
                    },
                    {
                        "x": 1617228000000,
                        "localedate": "2021-04-01",
                        "y": 106.155
                    },
                    {
                        "x": 1617314400000,
                        "localedate": "2021-04-02",
                        "y": 99.444
                    },
                    {
                        "x": 1617400800000,
                        "localedate": "2021-04-03",
                        "y": 73.143
                    },
                    {
                        "x": 1617487200000,
                        "localedate": "2021-04-04",
                        "y": 92.939
                    }
                ]
            }
        ],
        "labels": []
    },
    "options": {
        "units": "",
        "hoverOffset": 8,
        "layout": {},
        "interaction": {
            "mode": "nearest",
            "intersect": false
        },
        "chartArea": {
            "backgroundColor": "transparent"
        },
        "elements": {},
        "spanGaps": true,
        "plugins": {
            "title": {},
            "tooltip": {
                "callbacks": {}
            },
            "legend": {
                "display": true,
                "position": "top"
            }
        },
        "animation": {},
        "onResize": null,
        "scales": {
            "x": {
                "axis": "x",
                "type": "timeseries",                
                "ticks": {
                    "source": "auto",
                    "major": {
                        "enabled": false
                    },
                    "minRotation": 0,
                    "maxRotation": 50,
                    "mirror": false,
                    "textStrokeWidth": 0,
                    "textStrokeColor": "",
                    "padding": 3,
                    "display": true,
                    "autoSkip": true,
                    "autoSkipPadding": 3,
                    "labelOffset": 0,
                    "minor": {},
                    "align": "center",
                    "crossAlign": "near",
                    "color": "rgb(225, 225, 225)"
                },
                "alignToPixels": true,
                "stacked": true,
                "offset": true,
                "title": {
                    "display": true,
                    "text": "Zeitraum",
                    "padding": {
                        "top": 4,
                        "bottom": 4
                    },
                    "color": "rgb(225, 225, 225)"
                },
                "grid": {
                    "offset": true,
                    "display": true,
                    "drawBorder": true,
                    "drawOnChartArea": true,
                    "drawTicks": true,
                    "tickLength": 8,
                    "borderDash": [
                        1,
                        1
                    ],
                    "borderDashOffset": 0,
                    "borderColor": "rgb(2, 136, 209)",
                    "borderWidth": 0.88,
                    "color": "rgba(179, 229, 252, 0.8)"
                },
                "bounds": "data",
                "adapters": {},
                "display": true,
                "reverse": false,
                "beginAtZero": false,
                "grace": 0,
                "id": "x",
                "position": "bottom"
            },
            "y": {
                "axis": "y",
                "alignToPixels": true,
                "stacked": true,
                "title": {
                    "display": true,
                    "text": "Energie kWh",
                    "padding": {
                        "top": 4,
                        "bottom": 4
                    },
                    "color": "rgb(225, 225, 225)"
                },
                "type": "linear",
                "beginAtZero": true,
                "ticks": {
                    "minRotation": 0,
                    "maxRotation": 50,
                    "mirror": false,
                    "textStrokeWidth": 0,
                    "textStrokeColor": "",
                    "padding": 3,
                    "display": true,
                    "autoSkip": true,
                    "autoSkipPadding": 3,
                    "labelOffset": 0,
                    "minor": {},
                    "major": {},
                    "align": "center",
                    "crossAlign": "near",
                    "color": "rgb(225, 225, 225)"
                },
                "display": true,
                "offset": false,
                "reverse": false,
                "bounds": "ticks",
                "grace": 0,
                "grid": {
                    "display": true,
                    "drawBorder": true,
                    "drawOnChartArea": true,
                    "drawTicks": true,
                    "tickLength": 8,
                    "offset": false,
                    "borderDash": [
                        1,
                        1
                    ],
                    "borderDashOffset": 0,
                    "borderColor": "rgb(2, 136, 209)",
                    "borderWidth": 0.88,
                    "color": "rgba(179, 229, 252, 0.8)"
                },
                "id": "y",
                "position": "left"
            }
        }
    }
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Chart v3.0.0: Time Cartesian Axis - w/o Date Adapters - GitHub
I am looking for a way to use Time Cartesian Axis without a date adapter, because I have not found a way in...
Read more >
chartjs time cartesian axis adapter and date library setup
Question 3. after installing adapter and date library, how to fix the script below to make the plot work (Time Cartesian Axis)? I...
Read more >
Time Cartesian Axis - Chart.js
Time Cartesian Axis. The time scale is used to display times and dates. Data are spread according to the amount of time between...
Read more >
Using Chart.js with React.js to create responsive line charts ...
A time cartesian axis displays dates so the distance between data reflects how much time is between two data points. In order to...
Read more >
Adding a Date adapter for Time Cartesian axis from a cdn ...
Coding example for the question Adding a Date adapter for Time Cartesian axis from a cdn-Chart.js.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Stacked chart bar with border radius looks strange

Next page

Chart v3.0.0-rc.6: Missing Gridline right side....