[email protected]
Posts: 65
Joined: Fri Aug 26, 2022 9:33 am

More than one task bars on a series without space

Hello,
I found a way to have more than one task bars on a series: viewtopic.php?t=42468

But I'm looking for a way to do it without any space among them, it's possible to achieve this somehow?

Many thanks in advance.

Paulo Torres
jakub.j
Posts: 1080
Joined: Tue Jan 24, 2023 11:14 am

Re: More than one task bars on a series without space

Thanks for contacting us with your question!

If you want to get rid of the space between bars, you can set series.pointPadding to 0.
Demo: https://jsfiddle.net/BlackLabel/yrqb1o7f/

As you can see on the demo above, there is a white border between the bars, to avoid it, you can update every point's border with it's own color and the gap will not be visible anymore.
Demo: https://jsfiddle.net/BlackLabel/z4Lc5bk8/

Feel free to ask any further questions!
Best regards
Jakub
Jakub
Highcharts Developer
[email protected]
Posts: 65
Joined: Fri Aug 26, 2022 9:33 am

Re: More than one task bars on a series without space

jakub.j wrote: Thu Apr 13, 2023 7:23 am Thanks for contacting us with your question!

If you want to get rid of the space between bars, you can set series.pointPadding to 0.
Demo: https://jsfiddle.net/BlackLabel/yrqb1o7f/

As you can see on the demo above, there is a white border between the bars, to avoid it, you can update every point's border with it's own color and the gap will not be visible anymore.
Demo: https://jsfiddle.net/BlackLabel/z4Lc5bk8/

Feel free to ask any further questions!
Best regards
Jakub
Many thanks for the help, I'll try to implement what you have suggested.

Paulo Torres
jakub.j
Posts: 1080
Joined: Tue Jan 24, 2023 11:14 am

Re: More than one task bars on a series without space

That's great to hear!
In case of any further questions, feel free to contact us again.

Best regards
Jakub
Jakub
Highcharts Developer
[email protected]
Posts: 65
Joined: Fri Aug 26, 2022 9:33 am

Re: More than one task bars on a series without space

jakub.j wrote: Mon Apr 17, 2023 7:05 am That's great to hear!
In case of any further questions, feel free to contact us again.

Best regards
Jakub
Hello Jakub,
Can I mix this doubles on series with this: https://jsfiddle.net/gh/get/library/pur ... management

It seems this only works with Type: xrange. The structure of JSON is completely different and also we can't pass dates for the JSON.
Can you help me?

Thanks, Paulo Torres
jakub.j
Posts: 1080
Joined: Tue Jan 24, 2023 11:14 am

Re: More than one task bars on a series without space

Hey Paulo,

Could you please specify what do you mean by 'Can I mix this doubles on series'?

Best regards
Jakub
Jakub
Highcharts Developer
[email protected]
Posts: 65
Joined: Fri Aug 26, 2022 9:33 am

Re: More than one task bars on a series without space

jakub.j wrote: Fri Apr 21, 2023 6:56 am Hey Paulo,

Could you please specify what do you mean by 'Can I mix this doubles on series'?

Best regards
Jakub
Hello Jakub,
I mean, sometimes I want only one bar, I found this way below to do, anyway when I use the navigator: true , the height of the bars are very thin and I can't control this, at least I tried without success. Any better way to do this?

Code: Select all

Highcharts.ganttChart($parameters.ChartContainerId, {

    title: {
        text: "Project Paulo"
    },

    navigator: {
        enabled: false,       
    },

    chart: {
        //type: 'xrange',
        type: 'gantt',
        height: 400,
    },

  plotOptions: {
    series: {
      grouping: true
    }
  },

    yAxis: {
        type: 'category',
        categories: ['Sporting', 'Juventus'],
        
  },

  series: [{
    data: [{
      name: "test0", 
      start: 1627862400000,
      end: 1631577600000,
      completed: 0.5,
      y: 0,
    }, {
      name: "test1", 
      start: 1626134400000,
      end: 1630022400000,
      completed: 0.3,
      y: 1,
    }]
  }, {
    data: [{
      name: "test2", 
      start: 1625702400000,
      end: 1629158400000,
      completed: 0.2,
      y: 0
    }, {
      name: "test3", 
      start: 1625702400000,
      end: 1629158400000,
      completed: 0.8,
      y: 1
    }]
  }]

});

Thanks in advance
jakub.j
Posts: 1080
Joined: Tue Jan 24, 2023 11:14 am

Re: More than one task bars on a series without space

Hey,

Okey, now I get your point.

The bars get really thin, because of pointPadding and groupPadding.

If you set those properties, the bars will get thicker because the spacing between them will be smaller, see demo:
Demo: https://jsfiddle.net/BlackLabel/92Lht0en/

Let me know if that helped!
Best regards
Jakub
Jakub
Highcharts Developer
[email protected]
Posts: 65
Joined: Fri Aug 26, 2022 9:33 am

Re: More than one task bars on a series without space

jakub.j wrote: Fri Apr 21, 2023 10:44 am Hey,

Okey, now I get your point.

The bars get really thin, because of pointPadding and groupPadding.

If you set those properties, the bars will get thicker because the spacing between them will be smaller, see demo:
Demo: https://jsfiddle.net/BlackLabel/92Lht0en/

Let me know if that helped!
Best regards
Jakub
I didn't explain well in the first comment, thanks a lot for your help, this looks good :)

To set the yAxis, the only way is to do this code bellow? I'm asking because in normal Gantt the yAxis depends of bar names.

Code: Select all

    yAxis: {
        type: 'category',
        categories: ['Sporting', 'Juventus'],
        
  },
Thanks a lot
jakub.j
Posts: 1080
Joined: Tue Jan 24, 2023 11:14 am

Re: More than one task bars on a series without space

Hey,

I'm glad it helped!
If you want custom names for the rows, you need to use this code, if we have one point in a row (group), the name can be the one from the point (bar) but if you have more than one point in one row, it's better to use categories.

Let me know if you have any further questions!
Best regards
Jakub
Jakub
Highcharts Developer
[email protected]
Posts: 65
Joined: Fri Aug 26, 2022 9:33 am

Re: More than one task bars on a series without space

jakub.j wrote: Fri Apr 21, 2023 7:08 pm Hey,

I'm glad it helped!
If you want custom names for the rows, you need to use this code, if we have one point in a row (group), the name can be the one from the point (bar) but if you have more than one point in one row, it's better to use categories.

Let me know if you have any further questions!
Best regards
Jakub
Hello Jakub,
I'm facing a problem but I believe it's a feature.
With Grouping or xrange it's not possible to have parents and childs with expand and collapse?

Maybe the only way is to create like that: https://jsfiddle.net/gh/get/library/pur ... navigation

Can you confirm and help me, please?

Thanks, Paulo Torres
jakub.j
Posts: 1080
Joined: Tue Jan 24, 2023 11:14 am

Re: More than one task bars on a series without space

Hey!

You can have drilldown functionality in x-range chart. Simply import drilldown module in HTML and then on the parent series set a property drilldown to an id of a child series in chart.drilldown.series and you are good to go!

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

I hope you will find it useful
Best regards
Jakub
Jakub
Highcharts Developer
[email protected]
Posts: 65
Joined: Fri Aug 26, 2022 9:33 am

Re: More than one task bars on a series without space

jakub.j wrote: Thu Apr 27, 2023 7:23 am Hey!

You can have drilldown functionality in x-range chart. Simply import drilldown module in HTML and then on the parent series set a property drilldown to an id of a child series in chart.drilldown.series and you are good to go!

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

I hope you will find it useful
Best regards
Jakub
Hi Jakub,
Thanks for the quick answer.
When we click we are left with only one bar (Prototyping) but after this It's not possible to expand again, it's the normal behavior?

Thanks again for all your help
jakub.j
Posts: 1080
Joined: Tue Jan 24, 2023 11:14 am

Re: More than one task bars on a series without space

You're welcome!

You can nest the drilldown as far as you want, now the blue series drills down into two new series and then the red series also has drilldown to next set of series starting with an orange one. Just simply set drilldown to id of any new series you want.

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

Hope this helps!
Best regards
Jakub
Jakub
Highcharts Developer
[email protected]
Posts: 65
Joined: Fri Aug 26, 2022 9:33 am

Re: More than one task bars on a series without space

jakub.j wrote: Thu Apr 27, 2023 9:26 am You're welcome!

You can nest the drilldown as far as you want, now the blue series drills down into two new series and then the red series also has drilldown to next set of series starting with an orange one. Just simply set drilldown to id of any new series you want.

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

Hope this helps!
Best regards
Jakub
Hi Jakub,
When I click the drilldown happens but after I can't go back to the initial presentation with everything open. It's normal?

Return to “Highcharts Gantt”