artakserkses
Posts: 51
Joined: Tue Feb 23, 2021 11:23 am

Pinned div to header and grid sorting

And hello again :mrgreen:

I have two more issues, that i need to consult with you :)

1. https://jsfiddle.net/ev4fu2bz/

Is it possible to pin

Code: Select all

<div id="divThatBePinnedToHighchartHeader" ...
to header? So when chart is bigger than window div stays with header on scrolling?

2. Is it easily possible to sort series in gantt? Like here: https://jsfiddle.net/ev4fu2bz/ I would like to add sorting icons to label1 and label3 columns for example :)
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Pinned div to header and grid sorting

Hi again :)
Thanks for your contact and questions.

1. I don't get your point, do you want to add the id to highcharts elements?

2. Here are some sorting methods in HC, but we don't have dedicated symbols in our API for switching.
The easiest way is to render buttons and bind the code to sort.
https://www.highcharts.com/docs/advance ... ta-sorting

In this topic, you will find an example of what this might look like:
viewtopic.php?t=40663#p141140

Best regards!
Sebastian Hajdus
Highcharts Developer
artakserkses
Posts: 51
Joined: Tue Feb 23, 2021 11:23 am

Re: Pinned div to header and grid sorting

Thanks for answer :)
sebastian.h wrote: Fri Mar 12, 2021 8:11 am 1. I don't get your point, do you want to add the id to highcharts elements?
Nope, I want the red square to be pinned to topic (when i scroll the page down i want this red square to hide with char topic)

Image

sebastian.h wrote: Fri Mar 12, 2021 8:11 am 2. Here are some sorting methods in HC, but we don't have dedicated symbols in our API for switching.
The easiest way is to render buttons and bind the code to sort.
https://www.highcharts.com/docs/advance ... ta-sorting

In this topic, you will find an example of what this might look like:
viewtopic.php?t=40663#p141140
I will check this in no time :D

Artak
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Pinned div to header and grid sorting

Hi,
Sorry for the late reply.

Another interesting link, there are some examples of how to add scroll in the Gantt chart.
https://github.com/highcharts/highcharts/issues/9378

Let me know how are you doing.
Best regards.
Sebastian Hajdus
Highcharts Developer
artakserkses
Posts: 51
Joined: Tue Feb 23, 2021 11:23 am

Re: Pinned div to header and grid sorting

No problem,

This scrollablePlotArea looks interesting, but as KacperMadej showed in:
https://jsfiddle.net/BlackLabel/asyzfLv1/1/
it doesn't work well with gantt and navigator (in this example when I change minHeigh to 1000 it collapses :) )
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Pinned div to header and grid sorting

Hi,
As you can see Gantt didn't work completely with scroll.

Best regards.
Sebastian Hajdus
Highcharts Developer
artakserkses
Posts: 51
Joined: Tue Feb 23, 2021 11:23 am

Re: Pinned div to header and grid sorting

Yeah, that's why I did scrolling on parent <div>

And my solution for now is that on that div i made (scroll)="onScroll($event)" and in onScroll($event) i did sth like this:

Code: Select all

    if (event.target.scrollTop >= 70) {
      // console.log('zniżyliśmy się');
      this.redDiv.nativeElement.hidden = true;
    } else {
      // console.log('wróciliśmy na górę');
      this.redDiv.nativeElement.hidden = false;
    }
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Pinned div to header and grid sorting

Hi,
Thanks for share your solution.

​If you have further inquiries, you may reach out to me at any time.
Regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”