Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
Anonymous
Not applicable

Gantt Chart Visual tweak. (adding black line around the bars)

I wondered if anyone could point me at how I might amend a custom visual?

 

Its the Microsoft Gantt chart and the modification is hopefully shockingly simple. I just want to add a line around the task rectangles. We are using it for task scheduling and when several tasks schedule back to back it can be hard to see where one starts and another stops if they are all the same priority/state (this is being used to determine the colour of the task bars) so two yellow bars can appear next to each other with just numeric ID's on the lables identifying it's actually two different things.

 

I was hoping it would be somehting I could apply against a style/class. i think I have found the class concerned "task-rect" but am struggling to figure out where I might apply a style modifier to give it a line/stroke/colour.

 

Can anyone point me in the right direction

 

many thanks

 

Steve

 

 

1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

Did you you use the debug visual?

Or you used pbiviz package command to build a package? If so, please change GUID to any another one in order to bypass our CDN.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

View solution in original post

6 REPLIES 6
v-viig
Community Champion
Community Champion

Gantt Chart is open sourced on GitHub. Feel free to modify it as you want.

 

We have also included this feature into our backlog to the extend functionality.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Anonymous
Not applicable

Many thanks Ignat

 

I have downloaded the github and built my own version of the visual. I have tried applying some additional style attributes for stroke and stroke width to the taskRect (line 1558 in gantt.ts) but this doesn't seem to be making any difference.

 

I've also tried poking some style values into the CSS  but this also didn't seem to make any difference

 

I'll do some more research with regards to D3/SVG and typescript to see if I can figure out where I should add the relevant properties.

 

But thank you for considering it in the backlog.

 

Steve

v-viig
Community Champion
Community Champion

Did you you use the debug visual?

Or you used pbiviz package command to build a package? If so, please change GUID to any another one in order to bypass our CDN.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Anonymous
Not applicable

Many thanks Ignat

 

The GUID was the issue. I now have a chart with 20 pt black lines around it! 🙂

 

I was using BIG values to make sure I'd see it when it worked.

 

 

 

 

v-viig
Community Champion
Community Champion

I'm happy to hear that.

 

What do you think about submitting a pull request to GitHub repository?

We're really looking forward to having your contribution in Gantt Chart.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

 

Anonymous
Not applicable

Have hard coded the line at the moment, am still unravelling how to use a config option to turn it on and off. 

 

Once I've done that in my sand pit I'll submit a pull request.

 

many thanks for your help.

 

Steve

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors
Top Kudoed Authors