[SOLVED] charts.js - Floating Bars

If you need a graph with floating bars and wish to use the open source chart.js api, then this brief post should save you some serious time.

So, I needed to display a graph with floating bars, like in this example.
Unfortunately, I started with the lone Corvid Example which was recently updated (showing December 31, 2019).

Wasted a lot of time until I realised why the floating bars were not working:

The Corvid example inexplicably uses chart.js version 2.4.0 (!)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>

I’m guessing that whoever is updating that example forgot to update the version#.
This little oversight cost me several hours.

After initially failing to produce a floating bars graph with the Corvid example (chart.js), I tested CanvasJS.com with immediate and great results.
Excellent documentation too. The trial is free, but they charge a bundle for their license.
Checked out a few other libraries, including D3js.org
Excellent open source library, but the quality of the documentation is hit or miss, and was non-existent for the floating bars.

Eventually I went back to tinkering with chart.js since the documentation indicates it supports floating bars. After some sleuthing and reading up on it, I stumbled over this helpful tip at stackoverflow.

Light bulb went off - the version used in the Corvid example does not support floating bars, but the latest version (2.9.3) does.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>

Hope this will help someone save time.
Hope Corvid will update the example it provides.

3 Likes