How to dynamically create timeline chart on click of x-range chart in highcharts angular

Question

[enter image description here][1]I want to achieve the design given in the image below.Here I have to show task and it's related activities in different datetime. Main task is been shown as x-range chart type and when we click on the particular x-range bar or expand collapse button besides categories it should dynamically generate activites timeline chart with symbols showing on what date activities are there for main task. and it should show different symbol for different type of activites, like on which date activity is triggered, planned Or due date.

And one more thing I have to show different color on x-range bar wherever one or more activites inside main task is on same date. And symbols in the timeline chart can be overlapped as triggered and planned date can be same for some activites.

I just created the sample code for it,if you want to check. I haven't achieved it yet and I need help in achieving this. Kindly help.

Below is the link for stackblitz

https://stackblitz.com/edit/hightcharttimelinexrange?embed=1&file=index.html

Chart Design to be achieved(https://i.sstatic.net/PmPn4.jpg)

Refer to this image : https://i.sstatic.net/Cju0A.jpg

Answer 1

I did an example with 2 custom functions. The first one adds the wanted series as a collapsed to the main one and the second one destroys it.

Function to show new series:

function showTasks(newSeries, point) {
  var series = point.series,
    chart = series.chart,
    newYCat = [...chart.yAxis[0].categories];

  // Set points to higher y to make a space for collapsed points
  chart.series.forEach(s => {
    s.points.forEach(p => {
      if (p.y > point.y) {
        p.update({
          y: p.y + 1
        }, false, false)
      }
    })
  })
  // Add collapsed series
  chart.addSeries(newSeries);
  // Set point flag
  point.clicked = true;
  // Add the series name to the yAxis cat array
  newYCat.splice(newSeries.yPos, 0, newSeries.name);
  // Update the yAxis 
  chart.yAxis[0].update({
    categories: newYCat,
  })
}

I think that everything is clarified here - I left instructions in comment what is happening.

API to used options:

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

https://api.highcharts.com/class-reference/Highcharts.Axis#update

The hiding function does the opposite.

Functions are triggered in the point.events.click callback, where the collapsed series to this point should be defined.

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

API: https://api.highcharts.com/highcharts/series.line.events.click