etay
Posts: 3
Joined: Thu Dec 22, 2022 3:20 pm

Looking for a way to add "margin" around points

Having a Gantt as attached, how can I add some margin around the points (e.g "Project 1"), so they won't stick into the days (columns) lines, but have some space between them? (css solution is fine as well if can't do it from the api)

Thanks!
Attachments
Screen Shot 2022-12-22 at 17.21.43.png
Screen Shot 2022-12-22 at 17.21.43.png (60.71 KiB) Viewed 664 times
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Looking for a way to add "margin" around points

Hi,

Welcome to our forum and thanks for contacting us with your question!

CSS won't help here, because points are SVG elements. You can, however, edit their attributes at render time, as in the demo below.

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

Let me know if that was what you were looking for!
Best regards
Dawid Draguła
Highcharts Developer
etay
Posts: 3
Joined: Thu Dec 22, 2022 3:20 pm

Re: Looking for a way to add "margin" around points

Thank a lot! work amazing. Is it by design done by "rendering" manipulation, or can it be something that we can set in the API instead? (for future versions)
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Looking for a way to add "margin" around points

You're welcome!

I think setting it in the render event should be enough. You can also load it as a point option like this:
Demo: https://jsfiddle.net/BlackLabel/4dcf0j89/

If you'd like it added as a feature, request it on our official GitHub here:
https://github.com/highcharts/highchart ... new/choose

If you'll have any problems with my solution, feel free to write so that I can clarify any issues/matters.
Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Gantt”