LayTec-AG / Plotly.Blazor

This library packages the well-known charting library plotly.js into a razor component that can be used in a Blazor project.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Changing the min-height on the outer div

mrunks opened this issue · comments

After setting the height and width in the layout I notice that when a bar chart renders that a min-height of 350px is set.

The element looks like the following upon inspecting HTML

The chart itself seems to render the correct height but then there is a ton of white space even after shrinking the margins. Is there a way to override that setting ?

I was wondering this too, as this is causing me a problem.

I think overriding this value will be extremely hard, as styles applied directly to a container through HTML have precedence over almost everything else. Ideally this should be parameterised so that it can be modified where necessary.

@mrunks Did you manage to find a workaround for this?

For anyone else reading this issue, the problem stems from https://github.com/LayTec-AG/Plotly.Blazor/blob/main/Plotly.Blazor/PlotlyChart.razor - see the style that is applied to the outermost div, in the HTML itself.

I could make it an additional variable if you guys need it

Yes that would be very useful.

Defaulting the value to the current setting should avoid anyone suffering any breaking changes. Making this a parameter allows greater flexibility for anyone who needs to create charts that are smaller than this minimum, which is the situation for the usage I am trying.

I must have misunderstood the problem at this time.

Just overwrite the style attribute using

<PlotlyChart style="<custom>"/>

For your information, 350px is plotly's default height when no height has been found. Thats why I've set it to 350px too.