More than one task bars on a series without space

[[email protected]]

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]

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

[[email protected]]

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]

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

Best regards
Jakub

[[email protected]]

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]

Hey Paulo,

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

Best regards
Jakub

[[email protected]]

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]

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

[[email protected]]

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]

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

[[email protected]]

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]

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

[[email protected]]

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]

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

[[email protected]]

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?