Gantt-Chart | Gantt chart library using D3.js | Chart library

I have two simple vue components and want to use one in the default slot of the other. For some reason it takes only the first element but does not show anything after that. If I put standard before this first element it will show up normal, but if I place if after it will also not be displayed.

The page:

I'm trying to adapt this code (amCharts 5 Gantt Chart) to my project and want to hide the x-axis labels on this amCharts 5 gannt chart. Any thoughts on how to achieve this?

I am developing a ionic-angular application in which I need some gantt charts, I tried to use the Dhtmlx library but when I insert the gantt chart inside an ion-content the gantt disappear (but with inspect I can see the empty space where would be the gantt).

Anyone has an idea on how I can resolve this issue? Thanks in advance.

EDIT: probably is a sort of race condition beacuse the gantt is inizialized inside the ngAfterViewInit() (not in the ngInit as in the example), there is a way to avoid this?

I have an Array which is named tasks. There I have many tasks stored in. Example:

I want to create an D3 Js gantt chart for the first time. I found a pretty good example which fits my expectations https://dk8996.github.io/Gantt-Chart/ (Example2). But I have problem resizing the svg. I want to fit the example into my d3 container which has a fixed height and width. The buttons of the example can just be copy/pasted into my code. But the SVG is always generated at the bottom of my code/site.

I'm using Vega-Lite for Data Studio and I've created an interactive Gantt-Chart
Like in the image below :
[gantt-chart sample] https://i.stack.imgur.com/xZ4RA.png

However, I have a lot of data and my chart is limited by fixed height and width. Like this : [gantt-chart-lots-of-data] https://i.stack.imgur.com/2fFhQ.png

So my question is, how can I add a vertical scrollbar ? Or do I have the possibility to zoom-in/out on y-axis ?

I've already setup the possibility to interact with data (drag, zoom-in/out) by using "selection interval" parameter. I would like to do the same with "tasks" (see example below)

For the example, I've fixed the height to illustrate the fact that my data are tightly packed together.

I have a clear requirement to calculate a y coordinate in a d3 context, but I am struggling to...

a) find the d3 (scaling?) component and usage pattern to deliver the solution

b) identify any navigable d3 API resources which would help me find a)

I have a list of events which have a start and finish time and which are each associated with a process in which they execute sequentially. It's natural to present this like a multi-track interface (a bit like an audio editor or a gantt chart) in which each process/track is allocated its own horizontal swim lane, and the events are laid out horizontally according to their start and end time. It might end up looking a bit like this view from a research publication

Event data items have a reference to their process id (in the diagram shown the process ids would be M1, M2 and the events would be the little boxes labelled with numbers). I know each event's start and end time (determining their x coordinate and width) but I need to put the rectangle for the action in the right process row (y coordinate).

The list of events will be updating continually as they start and finish, and possibly mediated by a filter/brush in the future.

The number of rows varies as the number of processes varies. For this reason, only after joining a list of events (and encountering all the process ids they refer to) do you know how many rows are needed, the row height, and therefore what each event's y scale position should be. When a new event item enters the selection which points to a new process id, the scale should rejig to add an extra row. When it exits the selection, it may have been the last one in that process row, so then the row should disappear.

Is there a pattern for assigning the y coordinate of an event's row on a dynamic basis by its (categorical) process id for a dynamic list of event data?

How do I find patterns and solutions for a case like this?

I have a dataframe that looks like this.

I am using amCharts4 and is able to plot a vertical line on my Gantt chart representing the current date time as described in the following : Draw a vertical line representing the current date in amcharts gantt chart?. However, how do I make the vertical line move every sec on the chart based on the current time? Here is the code :