Support for Highcharts Gantt

[jvskriubakken]

Bug or Feature Request?

Feature Request

Description

Hi guys! Is there any plans to add support Highcharts Gantt?

How to reproduce

Live demo demonstrating bug

Versions

• React JSX Highcharts version:
• Highcharts version:
• React version:

[jvskriubakken]

Possibly with some guidance and or startup help I could do it my self and contribute it to this great project1!?

[whawker]

Hi @jvskriubakken, I would love the help if you're able! (and thanks for the kind words)

Taking a quick glance at the Gantt API, it seems the general principles are the same. I imagine it could be implemented in much the same way as React JSX Highmaps is - with a single X and Y Axis.

Looks like the only new things we need is a "Pathfinder" component, and new series type for Gantt (XRange already exists).
The rest looks much the same, we could reuse many of the components for React JSX Highcharts I think - certainly looks achievable!

[jvskriubakken]

That is great to hear @whawker !

[whawker]

Seems Gantt also includes Navigator, RangeSelector and Scrollbar functionality, I'm not sure whether we should pull these components into the Gantt package or expect users to include React JSX Highstock explicity?

i.e.

import { HighchartsGanttChart, Title, Subtitle } from 'react-jsx-highcharts-gantt'
import { Navigator, RangeSelector, Scrollbar } from 'react-jsx-highstock'

I also wonder whether we should add a specific Point component, seems Gantt charts are based around a single series with dynamic points rather than multiple series.

[jvskriubakken]

In their own example the users must explicit import from both "gantt" and highstock:

See here:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/gantt/demo/with-stock-navigation/

This probably means that the user needs pay for both gantt and highstock to use these features together? And then it's probably wise to make the user aware of this through the import statements?

My thoughts...

[jvskriubakken]

Hi @whawker !

Is this something I can help with, with some guidance? I'm really interested in getting this up and running :)

[whawker]

Yes I think it should be possible for you to implement this. I think maybe looking at how the React JSX Highmaps module works might be best?

It might be best opening a WIP pull request so I can provide guidance during implementation?

I believe the work required would be

• In a new react-jsx-highcharts-gantt package
• Use the Highchart Gantt api docs to figure out what common modules should be exported (Title, Tooltip, etc) from the Highcharts package
• Implement a HighchartsGanttChart component and pass through the ganttChart initialisation function (I don't believe the callback stuff here will be required)
• The above HighchartsGanttChart component should also initialise two default axes and override the default axes as Gantt charts seem to only have a single X and Y axis.
• Adding a new component for pathfinder
• Add tests

[jvskriubakken]

Great @whawker

I will start on this immediately.

But the WIP pull request link you gave, did not work....

[whawker]

Fantastic!

Thats odd about the link, it was this - https://ben.straub.cc/2015/04/02/wip-pull-request/

[jvskriubakken]

Maybe what you mean is that I should i create a branch from master and open a pull request immediately and commit often to this branch/pull-request?

[whawker]

That's exactly what I mean, thanks @jvskriubakken

[jvskriubakken]

Great! I've created a local branch "highcharts-gantt" and made some initial setup code. I'm so trying to push this to github. But it seems I am not allowed to. Am I doing something in the wrong order? Or am I not remembering my password correctly? :-)

[jvskriubakken]

Maybe I must fork this repository first?

[whawker]

You'll need to fork this project to your own GitHub account, then clone that repo. Then you will have correct push permission. Then you can open a PR from your fork to this project.

Guide here: https://guides.github.com/activities/forking/