Percentage width/height and horizontal/vertical alignment

[YasserHassan]

I am suggesting adding an option to specify the width and height as percentage (e.g. 50%) which would be good for responsive design. This could be achieved either via new options or using the current width and height by providing strings such as "50%".

A good feature to go with it is the ability to align the chart horizontally and vertically for both pixel and percentage-based dimension such as:

• hAlign: right|center|left.
• vAlign: top|center|bottom.

[jakezatecky]

While this would be a relatively useful option, it is also very possible to achieve these effects using just CSS and some markup (e.g. with a table or flex display). See this example where the funnel's container is aligned bottom, with a percentage width. Obviously, this is a bit more cumbersome than if it would be supported within the funnel chart itself.

[YasserHassan]

By cumbersome, do you mean it would affect the performance or it would take a lot of work? I'm asking to know if it would be accepted if implemented by myself or another contributor in the future.

[jakezatecky]

I meant that the CSS/markup solution is a bit more cumbersome. Adding this feature in the chart will barely affect performance.

I would accept a pull request that would add these features.

[YasserHassan]

That'd be good @jakezatecky. The more the component is independent and covering more situations out of the box the better.

[jakezatecky]

Support added for percentage-based widths/heights.

Since horizontal/vertical alignment is pretty easy with CSS and I rather not have any inline-CSS or stylesheets, I will leave it to the developer to horizontally/vertically align the chart's container.