Set the width of a rendered gantt diagram

[white-gecko]

If I render a gantt diagram with mermaid or kroki it has different widths. How can I specify the width of the rendered image?

[betterthanever2]

100 upvotes.
It would be great to manipulate the width of the chart, possibly with a horizontal scrollbar for long periods

[white-gecko]

A scrollbar would not be part of mermaid-js but of the integration.

[betterthanever2]

It's hardly possible in any integration, if you can't control the width

[imysl0]

yuzutech/kroki#1413 It may be useful, but I am still confused about how to use it

[Piratepie]

After doing some digging I found a way to set the width of any chart using the config.

So the config of the gantt diagram is declared here:

mermaid/packages/mermaid/src/config.type.ts

Line 1207 in 31a287b

export interface GanttDiagramConfig extends BaseDiagramConfig {

It doesn't have any implementation for max width or height like the xyChart has, but it does extend the BaseDiagramConfig.

mermaid/packages/mermaid/src/config.type.ts

Lines 190 to 199 in 31a287b

	export interface BaseDiagramConfig {
	useWidth?: number;
	/**
	* When this flag is set to `true`, the height and width is set to 100%
	* and is then scaled with the available space.
	* If set to `false`, the absolute space required is used.
	*
	*/
	useMaxWidth?: boolean;
	}

And here there's a useWidth that takes in a number which sets the width of the diagram.

So knowing that I made a config for the default gantt chart example which looks like this:

config:
    gantt:
        useWidth: 100

This seems to be working in the editor but doesn't here on GitHub as you can see below.

So I'm not sure if this will work for you, but trying never hurt anyone :p

---
config:
    gantt:
        useWidth: 500
---

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

[betterthanever2]

This is a great insight, thank you!

[imysl0]

It works!666~