entry angle for arrows on gantt

[gotmike]

Is there any way to have the arrows on the gantt charts point to the top of the bars instead of the side?

Like this...

[sebastian.h]

Hi gotmike,

Welcome to our forum and thanks for contacting us with your question.

In Highcharts API there are no options to change the way of entry arrow.

I can see two possibilities for achieving this, the first is to try to render an arrow with Highcharts.SVGRenderer and find the exact position to place it.
Simple arrow to draw from scratch with a renderer: https://jsfiddle.net/BlackLabel/1ugb3opv/ .

The second option is to modify the core and find a way to change the default drawing arrow.

All these options are labor-intensive and require a lot of custom code.

API References:
https://api.highcharts.com/class-refere ... VGRenderer
https://jsfiddle.net/gh/get/library/pur ... o/renderer

Feel free to ask any further questions!
Kindly regards.

[gotmike]

ok, thanks for your reply!

I was able to replicate the arrow type I'm looking for starting with your fiddle.

https://jsfiddle.net/wnsr8dqu/

I'm not clear how i would do this for subsequent series or data points though. can you help me with an example that has more than one?

seems like here we are manually drawing a single arrow on the chart, not tying anything to the data.

[sebastian.h]

Hi,

Thanks for your message.

You need to find the correct position of the point in the object, on example I show how to add another arrow.

Live demo:
https://jsfiddle.net/BlackLabel/u5wxg07f/

Let me know if that was what you were looking for.
Regards.

[gotmike]

ok well that's super helpful. i have it all working now.

here's my updated version...
https://jsfiddle.net/xLr05wmd/

the problem i'm seeing now is that if the screen gets resized, i get random weird arrows all over the screen.

is this something i can control? maybe something to do with the rendering engine?

here's what it looks like (u can replicate just by sliding the frame separator)...

[sebastian.h]

Hi gotmike,

Good job you have these arrows!

The problem was caused because the render draws arrows when the size chart is changing.
There is part of the code that checks if an arrow already exists and if so, does not create a new one.

Code: Select all

if (chart.myArrows) {
  chart.myArrow1.destroy()
  chart.myArrow2.destroy()
}

Live demo:
https://jsfiddle.net/BlackLabel/75vxnLhc/

Feel free to contact us if further help needed.
Regards.

[gotmike]

ok, and i added that now seems to work, but i'm getting this error (which is why i took it out in the first place)...

Code: Select all

Uncaught TypeError: chart.myArrows.destroy is not a function
    render Arrows:2460
    fireEvent highcharts-gantt.src.js:2103
    fireEvent highcharts-gantt.src.js:2108
    onload highcharts-gantt.src.js:29618
    firstRender highcharts-gantt.src.js:29593
    init highcharts-gantt.src.js:27863
    fireEvent highcharts-gantt.src.js:2112
    init highcharts-gantt.src.js:27728
    getArgs highcharts-gantt.src.js:27697
    m highcharts-gantt.src.js:27673
    ganttChart highcharts-gantt.src.js:52357
    loadArrows Arrows:2640
    <anonymous> Arrows:2080
    jQuery 2

[gotmike]

ok so i noticed that you used `destroy` on the individual arrows, not the arrow array.

adding this code gets me the same result without any errors...

Code: Select all

                            if (chart.myArrows) {
                                chart.myArrows.forEach(
                                    function(arrow) {
                                        arrow.destroy();
                                    }
                                );
                            }

[sebastian.h]

That's great to hear!

In case of any further questions, feel free to contact us again.