javascripthighchartsgantt-chart

Hide parent task total length in Highcharts Gantt


I am sorting my tasks via a parent task. Each user has his holidays. Because holidays can be set with some time in between, I'd like to hide the parent's task total length which thus does not reflect the reality of the time off.

Working codepen : https://codepen.io/Codepenmitsu/pen/QWVeqay

My data to draw the chart :

let today = new Date(),
  day = 1000 * 60 * 60 * 24;

// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);

let data = [
    {
        "name": "Guillaume",
        "data": [
            {
                "name": "Guillaume",
                "id": "Guillaume",
                "owner": "Guillaume"
            },
            {
                "name": "Congés Guillaume",
                "id": 1,
                "parent": "Guillaume",
                "start": 1678838400000,
                "end": 1679097600000,
                "owner": "Guillaume"
            },
            {
                "name": "Congés G",
                "id": 2,
                "parent": "Guillaume",
                "start": 1680566400000,
                "end": 1680912000000,
                "owner": "Guillaume"
            }
        ]
    },
    {
        "name": "Sylvain",
        "data": [
            {
                "name": "Sylvain",
                "id": "Sylvain",
                "owner": "Sylvain"
            },
            {
                "name": "Congés sylvain test",
                "id": 3,
                "parent": "Sylvain",
                "start": 1682899200000,
                "end": 1683676800000,
                "owner": "Sylvain"
            }
        ]
    },
    {
        "name": "Quentin",
        "data": [
            {
                "name": "Quentin",
                "id": "Quentin",
                "owner": "Quentin"
            },
            {
                "name": "Congés Quentin",
                "id": 4,
                "parent": "Quentin",
                "start": 1681862400000,
                "end": 1682035200000,
                "owner": "Quentin"
            }
        ]
    }
]

// THE CHART
Highcharts.ganttChart('container', {
  chart: {
    styledMode: true
  },
  title: {
    text: 'Highcharts Gantt in Styled Mode'
  },
  subtitle: {
    text: 'Purely CSS-driven design'
  },
    xAxis: {
    min: today.getTime() - (30 * day),
    max: today.getTime() + (45 * day)
  },
  accessibility: {
    keyboardNavigation: {
      seriesNavigation: {
        mode: 'serialize'
      }
    },
    point: {
      descriptionFormatter: function (point) {
        var dependency = point.dependency &&
            point.series.chart.get(point.dependency).name,
          dependsOn = dependency ? ' Depends on ' + dependency + '.' : '';

        return Highcharts.format(
          '{point.yCategory}. Start {point.x:%Y-%m-%d}, end {point.x2:%Y-%m-%d}.{dependsOn}',
          { point, dependsOn }
        );
      }
    }
  },
  lang: {
    accessibility: {
      axis: {
        xAxisDescriptionPlural: 'The chart has a two-part X axis showing time in both week numbers and days.'
      }
    }
  },
  series: data
});

As you can see, I'd like to hide the blue, orange and pink bars.


Solution

  • You can set visible: false for the parent points.

    let data = [{
        "name": "Guillaume",
        "data": [{
            "name": "Guillaume",
            "id": "Guillaume",
            "owner": "Guillaume",
            visible: false
          },
          {
            "name": "Congés Guillaume",
            "id": 1,
            "parent": "Guillaume",
            "start": 1678838400000,
            "end": 1679097600000,
            "owner": "Guillaume"
          },
          {
            "name": "Congés G",
            "id": 2,
            "parent": "Guillaume",
            "start": 1680566400000,
            "end": 1680912000000,
            "owner": "Guillaume"
          }
        ]
      },
      {
        "name": "Sylvain",
        "data": [{
            "name": "Sylvain",
            "id": "Sylvain",
            "owner": "Sylvain",
            visible: false
          },
          {
            "name": "Congés sylvain test",
            "id": 3,
            "parent": "Sylvain",
            "start": 1682899200000,
            "end": 1683676800000,
            "owner": "Sylvain"
          }
        ]
      },
      {
        "name": "Quentin",
        "data": [{
            "name": "Quentin",
            "id": "Quentin",
            "owner": "Quentin",
            visible: false
          },
          {
            "name": "Congés Quentin",
            "id": 4,
            "parent": "Quentin",
            "start": 1681862400000,
            "end": 1682035200000,
            "owner": "Quentin"
          }
        ]
      }
    ]
    

    Live demo: http://jsfiddle.net/BlackLabel/82uebvjx/