Changing horizontal width of line chart / aspect ration

[bankian]

Thanks for this project - really useful!

I'd like to have a line chart that's much wider than it is high. I can easily alter the height of the chart by setting height in the ".main" class, but if I try to alter width it just changes the container and not the chart itself, so the chart is limited to having a square aspect ratio.

I was hoping that with SVG it would be easy to make the chart any aspect ratio - am I missing something?

Ian

[helloserve]

I added two new parameters to the LineChart component:

        [Parameter]
        public int BoundHeight { get; set; }

        [Parameter]
        public int BoundWidth { get; set; }

Then I use these to set the local variables boundHeight and boundWidth in the BuildRenderTree method, and I also changed the viewbox values to use those variables instead:

SVG svg = new SVG() { { "width", "100%" }, { "height", "100%" }, { "viewBox", $"0 0 {boundWidth} {boundHeight}" } };

This allowed me to set the size and aspect ratio of the graph.

Also, it's better to remove the with and height properties from the SVG code. Doing so lets the SVG become responsive, albeit it retains the aspect ratio from the bound values.