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 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.
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.
}
CodeSandbox: https://codesandbox.io/s/highcharts-gantt-issues-sf87ge