Apexcharts.js: Range Bar is broken

Created on 3 Feb 2020 · 1Comment · Source: apexcharts/apexcharts.js

Bug report

Codepen

https://codepen.io/thellimist/pen/zYxgWvX

Explanation

There are multiple issues:

1) Small bars are not visible
1a) There should be two bars for Bobs and Design. There is one.

2) Heights are inaccurate
2a) Design has lots of paralel work but Deployment does not however, the total height of Deployment and Design are the same. This is an example with a few concurrent. It becomes unusable with real data with 20 tasks, 20 people, 5 to 10 concurrent work.

3) Tooltip does not work.
3a) It just doesn't work.
3b) Not in the codepen, but in my case I have made it work however the formatter formatter: function(value, obj) obj value (second parameter) returns null sometimes making it impossible to make custom tooltips

4) The bars overlap each other
4a) If you hover over Joe and Dan in Design section, you'll see that Dan is on top of Joe. They overlap.
4b) Check Data Set 2

5) Sometimes the data is on top of the lines
5a) Check Data Set 3

Possible Solution

https://codepen.io/jey/pen/jmClJ

If you look at the height for sections development and config, first one has 3 items and second one has 2 items. So their height is correctly calculated. One thing to note is

the height of the bars should most probably be the same.
the height of the sections can be dynamic like the D3 Gannt Chart example.

I really like Apex, but Gannt/Rangebar/Timeline Chart is really broken and not usable atm. Let me know if I can help on any decisions you are considering.

Thanks

Data Set 2

[
          {
            name: 'Bob',
            data: [{
                x: 'Design',
                y: [
                  new Date('Mar 3 2019 15:19:24').getTime(),
                  new Date('Mar 3 2019 16:19:24').getTime()
                ]
              },
              {
                x: 'Design',
                y: [
                  new Date('Mar 3 2019 12:19:24').getTime(),
                  new Date('Mar 3 2019 18:19:24').getTime()
                ]
              },
            ]
          },
          {
            name: 'Joe',
            data: [
              {
                x: 'Design',
                y: [
                  new Date('2019-03-02').getTime(),
                  new Date('2019-03-05').getTime()
                ]
              },
              {
                x: 'Design',
                y: [
                  new Date('Mar 3 2019 15:19:24').getTime(),
                  new Date('Mar 3 2019 16:19:24').getTime()
                ]
              },
              {
                x: 'Design',
                y: [
                  new Date('Mar 3 2019 12:19:24').getTime(),
                  new Date('Mar 3 2019 18:19:24').getTime()
                ]
              },
              {
                x: 'Design',
                y: [
                  new Date('2019-03-01').getTime(),
                  new Date('2019-03-08').getTime()
                ]
              },
              {
                x: 'Test',
                y: [
                  new Date('2019-03-06').getTime(),
                  new Date('2019-03-16').getTime()
                ]
              },
              {
                x: 'Code',
                y: [
                  new Date('2019-03-03').getTime(),
                  new Date('2019-03-07').getTime()
                ]
              },
              {
                x: 'Deployment',
                y: [
                  new Date('2019-03-20').getTime(),
                  new Date('2019-03-22').getTime()
                ]
              },
              {
                x: 'Design',
                y: [
                  new Date('2019-03-10').getTime(),
                  new Date('2019-03-16').getTime()
                ]
              }
            ]
          },
          {
            name: 'Dan',
            data: [
              {
                x: 'Design',
                y: [
                  new Date('2019-03-02').getTime(),
                  new Date('2019-03-05').getTime()
                ]
              },
              {
                x: 'Code',
                y: [
                  new Date('2019-03-10').getTime(),
                  new Date('2019-03-17').getTime()
                ]
              },
              {
                x: 'Validation',
                y: [
                  new Date('2019-03-05').getTime(),
                  new Date('2019-03-09').getTime()
                ]
              },
            ]
          },
        ]

Data Set 3

[
          {
            name: 'Bob',
            data: [{
                x: 'Design',
                y: [
                  new Date('Mar 3 2019 15:19:24').getTime(),
                  new Date('Mar 3 2019 16:19:24').getTime()
                ]
              },
              {
                x: 'Design',
                y: [
                  new Date('Mar 3 2019 12:19:24').getTime(),
                  new Date('Mar 3 2019 18:19:24').getTime()
                ]
              },
            ]
          },
          {
            name: 'Joe',
            data: [
              {
                x: 'Design',
                y: [
                  new Date('2019-03-02').getTime(),
                  new Date('2019-03-05').getTime()
                ]
              },
              {
                x: 'Design',
                y: [
                  new Date('Mar 3 2019 15:19:24').getTime(),
                  new Date('Mar 3 2019 16:19:24').getTime()
                ]
              },
              {
                x: 'Design',
                y: [
                  new Date('Mar 3 2019 12:19:24').getTime(),
                  new Date('Mar 3 2019 18:19:24').getTime()
                ]
              },
              {
                x: 'Design',
                y: [
                  new Date('2019-03-01').getTime(),
                  new Date('2019-03-08').getTime()
                ]
              },
              {
                x: 'Test',
                y: [
                  new Date('2019-03-06').getTime(),
                  new Date('2019-03-16').getTime()
                ]
              },
              {
                x: 'Code',
                y: [
                  new Date('2019-03-03').getTime(),
                  new Date('2019-03-07').getTime()
                ]
              },
              {
                x: 'Deployment',
                y: [
                  new Date('2019-03-20').getTime(),
                  new Date('2019-03-22').getTime()
                ]
              },
              {
                x: 'Design',
                y: [
                  new Date('2019-03-10').getTime(),
                  new Date('2019-03-16').getTime()
                ]
              }
            ]
          },
],

timeline

Source

thellimist

👍1

Most helpful comment

Hi @thellimist

Thanks for the detailed bug report. The range bar needs a rewrite as there are several pieces that don't fit together. I will re-visit the range-bar module soon and come up with a new way to draw these.