News Master

  • Ralf Guttmann

    https://uploads.disquscdn.com/images/d43f5b53d280f1930d5c148255d480bfe1a91906919a2f9d421da4240af93d2c.jpg
    We are using gantt charts (from fusion charts) already a couple of years and find it absolutely necessary that a milestone is not limited to just one day but has a duration between a start and an end date. From my experience from a lot of projects with customers this is a crucial feature. Another this is that the action groups should be visualized as a bracket to show a difference to a normal action. See sceen shot for example. We really would like to change from fusion charts to highcharts because we are already using the high charts library very succfesfully.

    • Lars Cabrera

      Hi, Ralf.
      Nice to know you’re interested in going with Highcharts 🙂

      Milestones and tasks are two quite different elements of a Gantt chart. Milestones are by definition single points in time, but there is nothing in the way of having what you described: http://jsfiddle.net/larsac07/rh98v1f2/. However, there is currently an issue with using the same y-value on multiple points in a tree grid (we are after all still in alpha), resulting in milestones not being able to be rendered on top of tasks.

      I agree that action groups (parent tasks) should perhaps be visualized in a different way than leaf-tasks, but I’m not too sure about the bracket-design. We’ll look into this.

      Thanks for your feedback 🙂

      • Anup Patil

        I have integrated gantt chart in my code. How will I be notified when this issue will be resolved?

    • Same trouble.

    • nguyenthao88

      when is gantt highchart final version?

      • Lars Cabrera

        Hi, nguyenthao88.
        We’re aiming for beta during Q2-Q3, so we’ll see about the release date after that 🙂

    • but we ask you not to clutter the GitHub issues with too many discussions about Gantt yet. We ask that you describe the problem as detailed as possible, preferably accompanied by a minimal example of the problem on JSFiddle or similar.

  • dunkoh

    Seems to be an issue with the JSFiddle – nothing happens when run it.

    • dunkoh

      Mixed Content: The page at ‘https://jsfiddle.net/larsac07/t0r8qz9p/’ was loaded over HTTPS, but requested an insecure script ‘http://github.highcharts.com/gantt/highcharts-gantt.src.js’. This request has been blocked; the content must be served over HTTPS.

      08:41:45.998 fiddle.jshell.net/larsac07/t0r8qz9p/show/:63 Uncaught ReferenceError: Highcharts is not defined

      08:41:48.513 fiddle.jshell.net/:1 Mixed Content: The page at ‘https://jsfiddle.net/larsac07/t0r8qz9p/’ was loaded over HTTPS, but requested an insecure script ‘http://github.highcharts.com/gantt/highcharts-gantt.src.js’. This request has been blocked; the content must be served over HTTPS.

      08:41:48.514 fiddle.jshell.net/:63 Uncaught ReferenceError: Highcharts is not defined

      at fiddle.jshell.net/:63

    • dunkoh

      changing the loading of the js file to https fixes it.

    • Lars Cabrera

      Hi, thanks for reporting. The fiddle tried loading content from http://github.highcharts.com, while you entered the site with https. I updated it to use https://github.highcharts.com.

      Best regards,
      Lars Cabrera

  • Kevin Fox

    I cannot reverse the X-Axis using:

    xAxis: {
    reversed: true
    },

    • Lars Cabrera

      Yes, I see what you mean. Thanks for the report! I’ll add the issue to Github. Although that should be a perfectly valid configuration, may I ask why you wish to reverse it? Just curious 🙂

  • cedric reymond

    Hello,
    Do you know if it’s possible to display months instead of weeks and days?
    currentDateIndicator: true, this paramater does not seems to have any effects…

  • Ali Ahmed

    Hello I need to customize high gantt charts with custom labels for bars and place hyper link for y-labels. Is there a way around?

    • Ali Ahmed

      Also Is there a way I can only show Months but not weeks?

      • Ali Ahmed

        Also when I am adding Long Duration in Min and Max values of chart then the UI of chart is breaking why it is not flexible to manage the width of Table according to Date Range?

        • I’m afraid I don’t understand what you mean by this, do you have a jsFiddle demo of the issue, or similar?

          • Ali Ahmed

            Hey pardon for not making your clear with my question. My question is that if I provide today date in x-axis min property and put (today + 4 years) in max value and format date with months and years then the X-Axis of month series is appearing too long which is breaking the Chart UI (Not even displaying the values in it). Here is the example https://jsfiddle.net/53ya6yq8/1/. I saw Google Gantt charts in which if there is such situation then it gracefully handles the width of X-axis. Is there any way it just skip middle months and show like (June, July … ) this or something?

          • I see, we don’t currently support that, but eventually we could try to get support for the Highstock Navigator (https://www.highcharts.com/docs/chart-concepts/navigator) in Gantt as well. I think that would help with cases like this.

          • Ali Ahmed

            How can we make container larger is there a property?

          • You can do this just with CSS. There are chart.width and chart.height properties, but we have some bugs there still with Gantt charts. Example: http://jsfiddle.net/p6dodwq9/

      • With the latest code you can define xAxis as an array with a single object, and this will stop Gantt from automatically creating the second axis. Here is a demo, also showing how to add custom labels to points (with links): http://jsfiddle.net/53ya6yq8/4/

        • Ali Ahmed

          Thank you for this. Also please tell me that if I can customize few more things such as Tooltip content with HTML, Legend and Bar Colors, Disable Percentage on Bars etc?

          • You can, see http://api.highcharts.com/highcharts/tooltip.useHTML. The API reference also shows you other options for customizing, including colors. Regarding % on bars, that is set by the data, in the “completed” option. By not including this option, there should be no % label by default. Otherwise, look into dataLabel formats for more control.

          • Ali Ahmed

            Thank for this API reference. I tried to change options for tooltip very few are working, I can’t override the content, is there a support for this. Also I checked onto series options in the documentation why I couldn’t find one for Gantt chart? There were options for other charts? For example I also need to place html links to the yAxis labels can you tell me how can I do that?

          • Lars Cabrera

            Hi, Ali. Gantt is still in Alpha, so documentation for its special options are not documented the same place yet. See the Data Format section on this page to see which options are available in addition to standard Highcharts.

            It would greatly help if you listed which tooltip options you were struggling with. I cannot see any options not working.

            Best regards, Lars Cabrera

          • Ali Ahmed

            Thanks for response Lars I appreciate that. Well yeah I had to struggled a lot but I figured to manage my chart, Highcharts are awesome by the way. Well there is one last thing I need from you which is that I learnt how to place data labels on bars but on one of my chart’s bar the data label is quite long which unfortunately bar is not able to display that data label however I used crop and overflow options and both seem to be not working with it. Can you help me with this?

          • Ali Ahmed

            Also when I am using useHTML option on dataLabels then the formatted text overlapping the tooltip. See here http://jsfiddle.net/53ya6yq8/4/. If you hover on “prepare office building” bar then you will see formatted text overlaps tooltip container.

          • Lars Cabrera

            When you use HTML to render your labels, the labels are generated outside the chart SVG, and therefore cannot be displayed underneath the tooltip, which is rendered in the SVG. But you can work around that with some settings and css: http://jsfiddle.net/53ya6yq8/9/

          • Lars Cabrera

            If you could share what you have so far, I might be able to help 🙂

          • Ali Ahmed

            Yes here is the example http://jsfiddle.net/53ya6yq8/4/, See first bar I have placed long text in data tables

          • Lars Cabrera

            Oh, right, the same example. There’s unfortunately no fix for this, if you really need to have html in the data labels. I would recommend rather moving that to the tooltip. That would fix the problem

          • Ali Ahmed

            Yeah thanks. I was wondering that since the text is not showing up on the bar because of longer length than the bar so if I could you know place ellipsis for the text so at least some text could be shown instead of hidden text.

          • Insurance business out of health care!

          • Ali, we just fixed a bug with pointFormat, so that should now work. As Lars says, Gantt is still in Alpha so there might be bugs, and the documentation is not released yet. Most generic options are similar to column charts. To allow HTML in yAxis labels, set yAxis.labels.useHTML. Example: http://jsfiddle.net/kaffwgao/

  • Anup Patil

    Hello,
    I have implemented Gantt chart, I would like to know that how to manipulate the tasks and sub-tasks, I mean can we manage the css for them. The parent task arrow and sub tasks are seems at a similar level, how to move sub-tasks to slightly on right (Lets say 10-15px)?
    One another point is all the parent tasks expands at the start, I just want let user decide which task to expand.

    Does ArrowSymbols module consist these things?

    Thanks
    Anup

    • Hi, these features are not implemented yet, but I will add them both to our issue tracker as enhancement suggestions.

      • Anup Patil

        Hi,
        How can I collapse all the tasks on loading, as it is very tough to identify the parent child relationship of tasks and sub tasks.
        I have tried editing highchart-gantt.src.js file but not succeed in it.
        Thanks in advance

        • Jon Arild (Highsoft)

          Hi Anup,

          If you somehow expose the isCollapse and collapse functions, by editing highcharts-gantt.src.js. Then I believe that you should be able to do the following in the chart load event:

          var axis = chart.yAxis[0];
          Highcharts.objectEach(axis.treeGridMap, function (node, pos) {
          if (!isCollapsed(axis, node, pos)) {
          collapse(axis, node, pos);
          }
          });

          While editing the source file, you should also modify the collapse function to pass in a second parameter to axis.update, to allow for optional redrawing of the chart.

          In the future this will be a much simpler process, when we get around to formalize, and expose the isCollapse, collapse, and expand functionalities.

          Hope this helps.

          Best regards
          Jon

  • Amber Blaylock

    Hrm. I have a bit of an odd situation trying to combine this with React – we’d been loading the general “code.highcharts.com” module on the page and then including additional modules for gauges, etc. on an as-needed basis. We have checks against repeated includes that work fine for all the other chart types. We want to do the same thing with this module, but it seems like it’s not compatible to just include both “code.highcharts.com” and “github.highcharts.com/gantt/highcharts-gantt.src.js” on the same page.

    Is my only option to replace “code.highcharts.com” with “github.highcharts.com/gantt/highcharts-gantt.src.js” and chug along? I’m not really sure that’s the best solution, given that this is in alpha. Is there any package we can include that works as an add-on with “code.highcharts.com” already included, a la highcharts-more, solid-gauge, etc.?

    (Also, is there an equivalent to setOptions for Gantt charts? We have a setup in React where we’re updating the options via setOptions on prop change if the chart already exists rather than removing and rerendering it ad nauseum.)

    • Hi Amber,
      There is a Gantt module file (modules/gantt.src.js) that can be added onto standard core Highcharts (highcharts.js), but since this module relies on changes made to the standard core that have not made it into production yet, you would still have to load the Alpha version of the standard core. Example: https://jsfiddle.net/t0r8qz9p/61/. In other words there are no particular benefits of doing it this way, as you will still be loading the Alpha version.

      Loading highcharts-gantt.src.js is the same as including the Alpha version of the standard highcharts.js as well as the Alpha Gantt module. So you are probably best off just replacing your “code.highcharts.com/highcharts.js” references with “github.highcharts.com/gantt/highcharts-gantt.src.js” for now.

      Regarding setOptions, you might be looking for “chart.update()”? See http://api.highcharts.com/highcharts/Chart.update. There might be bugs with this in combination with Gantt charts, but feel free to report those on our issue tracker: https://github.com/highslide-software/highcharts.com/issues

      • Amber B

        Thank you! I’ll take a look at chart.update(). Just for planning purposes on our end, do you know around when those changes to the standard core will be entered into production?

        • We are aiming for Beta release of Gantt this year, but final release date is not set yet. Possibly late this year or maybe early 2018.

          • Amber B

            Awesome, thank you!

  • Amber B

    Hey, me again. Sorry to keep bugging you guys, but I’ve just encountered two errors with this. Both are specific to this version of the core code (but not Gantt-specific; one occurs with all chart types I’ve tried so far and the other was specifically identified with solid gauge coloration).

    The first is a very odd error involving an interaction between updating the props of a React component and the accessibility module.

    Specifically, the issue appears to occur under the following scenario:
    1. Include both “https://github.highcharts.com/gantt/highcharts-gantt.src.js” and “https://code.highcharts.com/modules/accessibility.js”
    2. Include a method to destroy and re-create the chart whenever the options props are updated (triggered via componentWillReceiveProps)
    3. Update the props to include new options.

    The specific received error is:

    “Uncaught TypeError: Cannot read property ‘hcEvents’ of undefined
    at H.removeEvent (VM5218 highcharts-gantt.src.js:1695)
    at H.Chart. (VM5221 accessibility.js:39)
    at H.fireEvent (VM5218 highcharts-gantt.src.js:1821)
    at H.Chart.destroy (VM5218 highcharts-gantt.src.js:16090)”

    I ran into this issue when making a reusable component we have which can display a number of dynamic data options including series pulled from a database, configurable display options, etc.

    You can see a JSFiddle reproducing the issue at a fairly minimal level here: http://jsfiddle.net/amber_workxpress/upe3bm3r/23/

    In order to reproduce it, first click the “2011-2013” button, then click “2010-2016”. After both buttons have been pressed this issue will occur each time the button is pressed. Since this does not update the options, this bug definitely is a breaking issue.

    Please note: using chart.update does resolve the issue, but does not satisfy our use case because the number and names of the series we are using may change between option updates, but using chart.update will leave in old series options after they should have been removed. (You can see an example of this behavior here: http://jsfiddle.net/amber_workxpress/upe3bm3r/24/) My research had shown that the best way to resolve this was to destroy and rebuild the chart if the series options changed; if there’s another workaround that would let us update the series arbitrarily without encountering this issue, I’d definitely be open to using it.

    **************

    The second issue appears to occur when configuring colors for solid gauges while using this package. Specifically, this happens when setting up a multi-ring gauge chart and using Highcharts.Color in order to give each ring its own color and faded corresponding color track.

    The specific error I receive for this is:


    Uncaught TypeError: c.color.tweenTo is not a function
    at H.Axis.toColor (solid-gauge.js:11)
    at solid-gauge.js:12
    at Array.forEach ()
    at H.each (highcharts-gantt.src.js:1608)
    at object.drawPoints (solid-gauge.js:12)
    at object.render (highcharts-gantt.src.js:18460)
    at object.render (highcharts-more.js:34)
    at highcharts-gantt.src.js:15918
    at Array.forEach ()
    at H.each (highcharts-gantt.src.js:1608)

    You can see a minimal example of this here: http://jsfiddle.net/amber_workxpress/a0j3f8uu/1/

    I mention both of these issues here instead of at the Git because they seems to be specific to “https://github.highcharts.com/gantt/highcharts-gantt.src.js”. Replacing it with “https://code.highcharts.com/highcharts.js” appears to resolve both issues – but of course also means no Gantt charts for us, which is difficult when we want to have both a Gantt chart on the page and either the accessibility module enabled or a multi-ring solid gauge chart with Highchart-generated colors. I can also submit these both to the Git issue tracker if you would like.

    Again, because that was very long, to summarize, I am receiving two issues: the first “Cannot read property ‘hcEvents’ of undefined” when including the accessibility module alongside the Gantt version of Highcharts core and the second being “c.color.tweenTo is not a function” when using “Highcharts.color” in a solidgauge chart alongside the Gantt version of Highcharts core. Neither error occurs with the core “https://code.highcharts.com/highcharts.js” file.

  • Renato Garbim

    How can I generate the graph inside a function with input parameters?

    Example:

    function mountChart(titletext, header, itensSerie, divId) {

    Highcharts.ganttChart(divId, {
    chart: {
    zoomType: ‘x’
    },
    title: {
    text: titletext
    },
    xAxis: [header],

    series: [{
    name: ‘Name’,
    data: [itensSerie]
    }]
    });
    }

    • Jon Arild (Highsoft)

      Hi Renato,

      Unless I have misunderstood your question, then what you show in your example is more or less one way to do it. Here is a simple live demo: https://jsfiddle.net/t0r8qz9p/85/

      I would also recommend you to use our forum (forum.highcharts.com) for technical questions in the future, where you will benefit from a much quicker response rate.

      Best regards
      Jon