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

point accessibility

Hello,
I have (another :) ) question. Cause I would like to have some points just as background of my chart (ex. when I have an employee I would like to mark his worktime hours). I set draggableX/Y to false, but I would like also for that point to not answering on events (like selecting, hovering, etc).
And I have no clue how to do it, cause when i set:

Code: Select all

accessibility: {
enabled: false
}
nothing is happening (point events are still active on this point). Do highcharts.gantt has some other option for point to be invisible to events? Or can I set background for series that ex. 8-16 is grey, and everything else is white? Or maybe there is some other option that I can use :)
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: point accessibility

Hi,
how nice that you come back to us with questions :)

A few points as a background, I don't really understand?
So you would like to mark a point and block it from being clicked or moved?

In general, accessibility is used for something else, like support for visually impaired people or have other difficulties, you can read more here:
https://www.highcharts.com/docs/accessi ... ity-module
https://api.highcharts.com/gantt/accessibility

I'm waiting for news from you.
Regards.
Sebastian Hajdus
Highcharts Developer
artakserkses
Posts: 51
Joined: Tue Feb 23, 2021 11:23 am

Re: point accessibility

Like here:
https://jsfiddle.net/qsjrw4d2/3/

I would like for those grey points to be as background (without mouse events, just to show - like in the fiddle - when can I rent a car :wink: )
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: point accessibility

Hi,
I prepared a demo where I rendered a custom background field, are you looking for something like that?

Demo:
https://jsfiddle.net/BlackLabel/xmg31aez/

Let me know what do you think about this solution.
Regards!
Sebastian Hajdus
Highcharts Developer
artakserkses
Posts: 51
Joined: Tue Feb 23, 2021 11:23 am

Re: point accessibility

Yup, something like that, but with start/end as dates (cause computing when should i start, and end this rect will be pain in ... you know what :mrgreen: )
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: point accessibility

Hi,

It's possible, I found an example with custom arrows added on the end of the point.
You can see in this example how the coordinates are extracted.

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

If you want help with the implementation you can reach me any time.
Regards!
Sebastian Hajdus
Highcharts Developer
artakserkses
Posts: 51
Joined: Tue Feb 23, 2021 11:23 am

Re: point accessibility

I did it in other way (cause I have multiple series, and I'm in typescript, so it is not 1:1 with javascript version):

Code: Select all

  chartOptions: Highcharts.Options = {
    chart: {
      events: {
        render: () => {
          const chart = this.chartRef;
          const series = chart.series;
          if (series.length > 0) {
         
            if (chart.myBackgrounds !== undefined) { // <- checking if myBackgrounds is on :)
              chart.myBackgrounds.forEach(point => {
                point.destroy(); // <- If there are some myBackgrounds we need to destroy them. We cannot just clear the array, cause it won't work (no idea why  :mrgreen: )
              });
            }
            chart.myBackgrounds = []; // <- now we can clear array
            series.forEach(serie => {
              const points = serie.points;
              if (points.length > 0) { // <- checking if serie has points, cause if not points.find will throw error that points is undefined
                const point = points.find(p => {
                  if (p.visible === false) {
                    return p; // <- I set visible attribute to false for every point that I want to be as backgrounds. I don't know if this is the best way (i was thinking if point.custom.thisIsBackgroundPoint will work, but this is fine for me at this stage)
                  }
                });

                if (point !== undefined) { // <- checking if we have background points
                  const myRect = chart.renderer.rect( 
                    point.shapeArgs.x + chart.plotLeft, point.shapeArgs.y + chart.plotTop,
                    point.shapeArgs.width, point.shapeArgs.height, point.shapeArgs.r) // <- drawing the rectangle, and this is the easiest way to do this, cause we don't have to compute hardly anything :) (point.shapeArgs is computed in Highcharts, and chart.plot are computed too)
                    .attr({
                      'stroke-width': 1,
                      stroke: 'black',
                      fill: 'rgb(51, 102, 204)',
                      opacity: 0.2,
                      zIndex: -1
                    })
                    .add();
                  chart.myBackgrounds.push(myRect); // <- adding rectangle to myBackgrounds and that's it
                }
              }
            });
          }
        }
     }
  }
}

The only thing that I found peculiar is that I cannot update this event with update'ing Highcharts.Options (as I remember I can update point.events with Highcharts.Options, but I can't update chart.events)
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: point accessibility

Hi,

The update chart.events don't work, here you will find the issue for this:
https://github.com/highcharts/highcharts/issues/6538

A possible solution would be, assuming that you are using Angular, deleteing and recreate the chart.
If you would like to try, here is a demo of how to destroy the chart.
https://stackblitz.com/edit/highcharts- ... ne-apwusy

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

Re: point accessibility

sebastian.h wrote: Thu Apr 08, 2021 8:15 am Hi,

The update chart.events don't work, here you will find the issue for this:
https://github.com/highcharts/highcharts/issues/6538

A possible solution would be, assuming that you are using Angular, deleteing and recreate the chart.
If you would like to try, here is a demo of how to destroy the chart.
https://stackblitz.com/edit/highcharts- ... ne-apwusy

Best regards.
Thanks, but it isn't essential (as for now :mrgreen: ) for me, so i would live with this :)
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: point accessibility

Hi,

Sure, we can always come back to that.

Best greetings.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”