Question 51842 in Javascript Question posted in
A very good W3school tutorial can be found here.

Hide parent task total length in Highcharts Gantt – Javascript

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.

Tags:

2

Answers


  1. 0

    There must be an API way of handling it. For that you need to search in the documentation: https://api.highcharts.com/gantt/global

    But the quick fix can be given using css and as you can see it is working as expected.

    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",
                "className": 'parentBar'
            },
            {
                "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",
                "className": 'parentBar'
            },
            {
                "name": "Congés sylvain test",
                "id": 3,
                "parent": "Sylvain",
                "start": 1682899200000,
                "end": 1683676800000,
                "owner": "Sylvain"
            }
        ]
    },
    {
        "name": "Quentin",
        "data": [
            {
                "name": "Quentin",
                "id": "Quentin",
                "owner": "Quentin",
                "className": 'parentBar'
            },
            {
                "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
});
    @import "https://code.highcharts.com/css/highcharts.css";

#container {
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-treegrid-node-level-1 {
  font-size: 13px;
  font-weight: bold;
  fill: black;
}

.parentBar {
  display: none;
}
    <script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>

<div id="container"></div>
    Login or Signup to reply.
  2. 0

    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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search