Chart.js: Floating bar with time as x-axis

[TipluSen]

hello folks,

i've tried out the master version of chart.js and wondered if floating bar with time as x-axis is supported.

i've tried
data: [{x:'2016-12-25', y:[20, 25]}, {x:'2016-12-26', y:[13, 28]}]
but its kinda not working.

any tips?

thanks!

[benmccann]

What if you try it with labels: ['2016-12-25', '2016-12-26'] and data: [[20,25], [13,28]]?

I think that data format might be the only one supported right now although what you tried really should be supported as well. If you or anyone else wants to try adding support for that a PR would be welcome!

[TipluSen]

What if you try it with labels: ['2016-12-25', '2016-12-26'] and data: [[20,25], [13,28]]?

I think that data format might be the only one supported right now although what you tried really should be supported as well. If you or anyone else wants to try adding support for that a PR would be welcome!

new attempt with following code, but its still not working. the range of the y-axis is correct but the bar is somehow not rendered. i use datasets because we do have multiple datasets to display, so i tried to put labels inside the dataset

data: {
    datasets: [
        {
            label: "Float",
            labels: [
                "30.08.2019 00:08:00",
                "31.08.2019 00:08:00",
                "01.09.2019 00:08:00"
            ],
            data: [
                [160, 100],
                [160, 100],
                [160, 100]
            ],
            backgroundColor: "rgba(75, 192, 192, 0.2)",
            borderColor: "rgba(75, 192, 192, 1)",
            borderWidth: 1,
            fill: false,
            lineTension: 0,
            type: "bar"
        }
    ]
}

[benmccann]

Labels are supposed to go outside the dataset:

data: {
    labels: [
        "30.08.2019 00:08:00",
        "31.08.2019 00:08:00",
        "01.09.2019 00:08:00"
    ],
    datasets: [
        {
            label: "Float",
            data: [
                [160, 100],
                [160, 100],
                [160, 100]
            ],
            backgroundColor: "rgba(75, 192, 192, 0.2)",
            borderColor: "rgba(75, 192, 192, 1)",
            borderWidth: 1,
            fill: false,
            lineTension: 0,
            type: "bar"
        }
    ]
}

If you're able to share an interactive example on plunker or a similar site that will allow us to provide more help

[ekerstein]

@benmccann I can't seem to get it working. I tried your example in jsfiddle and it's not working: https://jsfiddle.net/ekerstein/p34vtf0w/16/

[benmccann]

I responded on the other thread, but posting here as well for anyone else who sees it. The feature is not yet released and will be included in the upcoming 2.9.0 release