christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Is there a way to put start and stop points only on Gantt Chart

Hi, is there a way to put just the start and stop points only on the Gantt Chart (not the whole period)?

Right now the hack I am using is to put the data point as milestone: true. but I wonder if there is a better way to do this?
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Is there a way to put start and stop points only on Gantt Chart

Hi,

Thanks for the question!

Could you please elaborate/send me an image of what you're trying to achieve?

Then I'll gladly take a deeper look into it & try to help you figure out a solution.

Best regards,
Jakub
Jakub
Highcharts Developer
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: Is there a way to put start and stop points only on Gantt Chart

Capture.PNG
Capture.PNG (12.09 KiB) Viewed 3757 times
In that screenshot, I have a process that already existed, with start and end time. However, that process will also have a scheduled start time, and scheduled end time. I don't want to use the bar chart on that scheduled start time and end time, but use some other graphic, say, circle, or square, or diamond, to indicate that a process has start time there and end time there.
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Is there a way to put start and stop points only on Gantt Chart

Hi,

Thanks for the clarification.

You need to override the default point.graphic element with your SVGs.

I would do it like this:
- disable the default point.graphic for each point with point.graphic.hide()
- add a custom SVG to the "start" of the event for each point
- add a custom SVG to the "end" of the event for each point

Here's a demo showing how to achieve this: https://jsfiddle.net/BlackLabel/phetv2wb/

API:
- https://api.highcharts.com/highcharts/c ... nts.render
- https://api.highcharts.com/class-refere ... SVGElement
- https://api.highcharts.com/class-refere ... VGRenderer

Let me know if that helps.

Best regards,
Jakub
Jakub
Highcharts Developer
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Is there a way to put start and stop points only on Gantt Chart

I'm glad it helped!

Do not hesitate to let me know if you have any more questions:)

Best regards,
Jakub
Jakub
Highcharts Developer
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: Is there a way to put start and stop points only on Gantt Chart

Hi Jakub,

The solution works well. However I seem to lose the ability to display the tooltips. Any ideas?
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: Is there a way to put start and stop points only on Gantt Chart

Also for some reason I keep getting this error

Cannot read properties of undefined (reading 'hide')

Everytime I don't pass `milestone: true` into the data
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: Is there a way to put start and stop points only on Gantt Chart

Sorry for lots of questions. I am also adding a custom property on point. How do I add the correct typing for that? I see I can do Highcharts.PointOptionsObject but then I also don't have other built in typings such as point.plotX, point.plotY
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: Is there a way to put start and stop points only on Gantt Chart

Could you also explain why there is a point.shapeArgs.width calculation there in chart.plotLeft + point.plotX + point.shapeArgs.width
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: Is there a way to put start and stop points only on Gantt Chart

Sorry again for all of the questions. I wonder why we need the `graphic.hide` there when we initialize it first time?
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: Is there a way to put start and stop points only on Gantt Chart

I couldn't find the reference for `graphicStart` or `graphicEnd` in the docs. Could you point out to me regarding that?
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Is there a way to put start and stop points only on Gantt Chart

1. I've tried setting milestone to true/false and everything seems to work correctly. Could you please try to replicate this?

2. The calculation for the graphics is based on these values:
chart.plotLeft - the 'x' coordinate of the chart
point.plotX - the 'x' coordinate of the point (maximum left 'x' of the point) relative to the chart
point.shapeArgs.width - the width of the point

If you sum these values up you'll get the 'x' coordinate where the point ends.

You can experiment with chart.renderer on your own to see how exactly does it work.

API: https://api.highcharts.com/class-refere ... t#renderer
Example: https://jsfiddle.net/gh/get/library/pur ... o/renderer

3. You're right, after disabling the main point.graphic the toolip stops showing up. Instead of disabling the main graphic you can just set a transparent color to the points so that it's still invisible, but Highcharts can find the main graphic.

Here's a demo: https://jsfiddle.net/BlackLabel/pctx1h4n/

4. The solution I've created is not based on default Highcharts options - it's a custom-built solution to your needs:
- point.graphic is the default SVG graphic that you did not want to show - that's why I use point.graphic.hide() in the beginning
- instead, I create two separate SVGs (graphicStart, graphicEnd) which I render at the ends of the default point.graphic

5. When it comes to point.graphicStart and point.graphicEnd there's nothing about that in the docs because it's a custom solution - I've created these objects for the purposes of our demo.

If you want to use Highcharts with TypeScript, you should extend the PointOptionsObject with graphicStart and graphicEnd (both of type SVGElement).

Interface API: https://api.highcharts.com/class-refere ... ionsObject

Let me know if that answers your questions :)

Best regards,
Jakub
Jakub
Highcharts Developer
christiansakai
Posts: 20
Joined: Wed Feb 15, 2023 1:03 pm

Re: Is there a way to put start and stop points only on Gantt Chart

Hi Jakub,

I would like the tooltip to show when I hover on the circle, not when I hover in the middle of the start/stop circles. Is there a way to do this?

I think I can just use graphicStart and not use graphicEnd, and use transparent color for the original graphic. But that seems to mean that if I hover in the area around the circles (as far as however long the original graphic is) the tooltip would show?

Right now the one with milestone works as what I'd like to see. I'm just thinking if there is a better way to do it without milestone.
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Is there a way to put start and stop points only on Gantt Chart

Unfortunately, yes, you're right. By default the tooltip is related to the main graphic.

To change it's default behavior you could try something like this: https://jsfiddle.net/BlackLabel/y14q08ha/

If you create if statements for all the startGraphics in the mouseMove event then you could show the tooltip when hovered only on the startGraphics point.

Unfortunately, I do not see any other simple way to solve it in Gantt.

But, if you do not want to show the endGraphic then I don't see a reason to use Gantt over Highcharts core. You could try something like this: https://jsfiddle.net/BlackLabel/e9ds1vnb/

Let me know if that helps.

Best regards,
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Gantt”