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.