Chart.js: Are "floating" bar charts possible?

[aardidi]

As stated in the title, I can't figure out or find an example of working floating bar charts with Chart.js, is it possible?

Something like this for example.

Thanks,
Aardidi

[RoxKilly]

I don't know whether this is natively supported but if not I would try using stacked horizontalBar type, so that each row actually has 2 bars.
To make a bar float to the right, I would make it the 2nd dataset, and make the first dataset invisible by setting its background color to rgba(0,0,0,0)

[aardidi]

Yeah, that works well enough, thanks!

[RoxKilly]

you got it.

[lameze]

Hi Chart.js team, firstly congrats for the nice work!

We (Moodle HQ devs) have choosen Chart.js as replacement for our old legacy charts and the library is already integrated on moodle core and is available on master branch. So far we have managed to convert almost every charts, except one that uses floating bar combined with a line chart.

Any plans to get this chart type supported by default on Chart.js core? There is a plugin https://github.com/cprimera/Chart.MultiFloatingBar.js but would be great to get this chart type on Chart.js core.

Thanks in advance.

[marinaglancy]

+1 to this request

Suggested above workaround will show incorrect data on mouseover :(

[RoxKilly]

@marinaglancy until this is implemented, if you use the workaround I suggested, you can control what shows up on mouseover. You can set callbacks that are fired when the object needs to show tooltip content, and you can customized what is shown.

These options can be set within the options.tooltips.callback option set:

options = {
    tooltips:{
        callbacks:{
            title://function that returns a string
            beforeLabel://function that returns a string,
            label: //returns a string, an array of strings (each line is one array member)
            afterLabel: //function that returns a string,
        }
   }
}

Basically, if you really want this feature today, the tooltips on mouseover issue should not be what stops you.

[marinaglancy]

Thanks RoxKilly, we'll keep trying. We also need to add lines to the same chart which makes it even more challenging. Pity it's the last report in moodle we have not converted to chartjs and it stops us from discarding the old graphlib completely

[etimberg]

@marinaglancy I might have a work-around that gets you very close to what you are looking for but it will only work if all the data is positive or all negative

[etimberg]

@marinaglancy @lameze here's a work around that does what you need for a horizontal bar. The same principles could apply to the vertical bar as well. In which case you need to override things on the Chart.controllers.bar.prototype. In my fiddle I've added a new option that can be added to a linear axis named 'float' that turns this behaviour on. I'm not sure on this name, but feel free to change it for your purposes. This solution works for both positive and negative numbers.

I don't know yet how this solution fits into where I see the core chart.js lib going so I can't promise anything when it comes to placing this in the lib.

[bjax13]

@etimberg I was looking at your work around fiddle and perhaps I am just missing something but even with the float set to true it seems to have the default horizontal bar-graph behavior.

[simonbrunel]

Implemented in #6056 and will be released in v2.9.