Dylan Cristy
Posts: 13
Joined: Fri Oct 30, 2015 8:44 pm

Having several problems with Gantt chart, also having problems setting up test environments to replicate.

Posting this here because I know it's going to be too broad for StackOverflow.

I'm setting up a Gantt chart with a hierarchy to group sub-tasks under a parent task, as well as showing milestones across the parent task track by taking advantage of yAxis uniqueNames: true and following the technique demonstrated here: https://jsfiddle.net/BlackLabel/jcdma83r/

I'm also enabling X axis drag-zoom, and the full bottom navigation bar.

I'm running into three problems, only one of which I can replicate in a test environment to show you. The three problems are:

  • When zooming in, the top two rows of the chart which show position along the full timeline do not change to finer resolution as appropriate for the zoom level. For instance, when starting out and zoomed out to show the entire timeline, the top row is years and the bottom row is months. When zoomed in sufficiently, the expected behavior is that the top row would change to week-of-year and the bottom row would change to day-of-week (with date). This does not happen. In my actual environment, the top row only zooms in to month, and the bottom row to week-of-year. In the test environment I was able to get set up, it seems to get stuck at having the top row stay at year and the bottom row at month. At least this one I was able to replicate for you to look at, and I will provide a link below.
  • The second issue I am having is that the milestones I've included seem to not respect the fact that I have a custom tooltip pointFormatter function for the series. I was not able to replicate this in the test environment, but I know that it's not calling the function because if I set a breakpoint in the formatter function, the breakpoint never gets hit, and the tooltip for the milestone is blank.
The following screenshot shows both the zoom resolution issue and the tooltip issue:
zoom-and-tooltip-issue.PNG
zoom-and-tooltip-issue.PNG (3.25 KiB) Viewed 693 times
  • The third issue I'm having is going to be even harder to solve because it is not even consistent in my own environment, and I was not able to replicate it a test environment. The issue is that when zoomed in, if I click on a parent task label to expand and view the subtasks, the zoom width does not change (i.e. if I'm zoomed in to one week, it stays at one week width), but the start of the zoomed in area changes from wherever I happen to be in the timeline and resets to the beginning of the timeline. So if I zoom in to one week somewhere in the last half of the timeline, and then I click to expand the parent task, all of a sudden I'm zoomed in to the first week of the timeline. Again, unable to replicate in a test environment, and additionally is inconsistent behavior in my own environment, so I'm not sure what conditions cause it to happen.
So, the first issue I was able to replicate in a CodePen.

Before clicking on the link to CodePen, please read further. The actual environment I'm working in has some very specific constraints, and the CodePen test setup is not actually adequate to fully diagnose the other problems. I am also having issues getting an adequate test environment set up, and could use your help/suggestions in that area.

Here's the example of what I'm trying to do, set up in a CodePen: https://codepen.io/dylancristy/pen/mdjWbvZ

But here's the reality of what I'm dealing with. I'm building this as part of a SharePoint Framework web part, for an on-prem SharePoint 2016 environment. Since I'm stuck on SharePoint 2016, it means I am restricted to using SPFx v 1.1. SPFx v 1.1 is restricted to using React 15.4.2 (and Typescript). Yes, I know, it's old. But because of the limitations imposed by MS and SPFx, that's what I'm stuck at. That version of React is even too early to use the highcharts-react-official wrapper for Highcharts, but with some assistance I was able roll my own: https://stackoverflow.com/a/74704983/988264

Despite the limitation on React, I am using Highcharts 10.3.2.

So considering all that, it seemed to me that some of the issues I was seeing might have to do with how React plays into the mix, so in order to truly attempt to replicate the issues I would need a test environment that used React 15.4.2 and Typescript. So I tried to set one up on CodeSandbox. I set up a basic little environment with the correct version of React and ReactDOM, I pulled in my home-rolled version of the Highcharts React wrapper component, and tried to set up a similar little test as I have in CodePen. However, the issue I'm having over on CodeSandbox is that the Highcharts Gantt plug-in is not being applied to the main Highcharts object. It works in my real environment, just not in CodeSandbox. When the chart goes to initialize, I get the error
H[constructorType] is not a function

and inspecting the Highcharts object, you can see that there's no "ganttChart" property/function. I set up the plug-in the same way I do in my actual environment (which, again, is working):

Code: Select all

// other imports - React, props, state, etc
import * as Highcharts from "highcharts";
import highchartsGantt from "highcharts/modules/gantt";

highchartsGantt(Highcharts);

export default class MyChart extends React.Component {
    // etc.
}
Any help you could provide to help get the CodeSandbox example up and working would be much appreciated, so that I can try and replicate the other two issues I'm having, and potentially get your help trying to solve those as well.

CodeSandbox: https://codesandbox.io/s/highcharts-gantt-issues-sf87ge
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Having several problems with Gantt chart, also having problems setting up test environments to replicate.

Hi,

Thanks for contacting us with your question!

From what I can recommend you is to use the older version of our wrapper. Our wrapper version 1.4.0 seems to work for React 15.4.2.
See the demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Let me know if it works and if there are other problems with Highcharts, please present them in the form of a demo, e.g. in codesandbox. It will be easier for me to help then.

If I may clarify any issues/matters I am available at your convenience.
Best regards!
Dawid Draguła
Highcharts Developer
Dylan Cristy
Posts: 13
Joined: Fri Oct 30, 2015 8:44 pm

Re: Having several problems with Gantt chart, also having problems setting up test environments to replicate.

Thanks for your response. While that does appear to work in Codesandbox, it does not work in my actual environment, although switching to

Code: Select all

import * as Highcharts from 'highcharts/highcharts-gantt';
as opposed to

Code: Select all

import * as Highcharts from 'highcharts';
import highchartsGantt from 'highcharts/modules/gantt';

highchartsGantt(Highcharts);
seems to work in both my real envrionment and in Codesandbox, so I'll stick with that.

As I mentioned, I am building this within the context of creating a SharePoint SPFx v 1.1 webpart, and if I try to use highcharts-react-official v 1.4.0, I end up getting a "Minified React error #130", which is:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyChart`
This error is thrown from <url>/spfx/sp-webpart-workbench-assembly_en-us.js, so, clearly thrown from a part of the toolchain related to SPFx/SharePoint, which is not something I can replicate in Codesandbox.

So I'll keep using my home-rolled wrapper in my examples, since that's what I'm actually able to get working in my true environment.

I did manage to solve the tooltip issue, but the zoom resolution issue is still happening (issue #1 above), so I will try to set up some demos to share with you.
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Having several problems with Gantt chart, also having problems setting up test environments to replicate.

Hi,

As for SharePoint and your own wrapper, I can't help you with them because our support can't cover them. As for the zoom problem on the timeline, I see you created a new thread about it (viewtopic.php?f=19&t=50159) and I replied to it. I hope I was helpful.

​If you have further inquiries, you may reach out to me at any time.
Kind regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Gantt”