Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.29k stars 531 forks source link

Blazor 0.9 chart size not being scaled properly - always small #787

Closed intech-paul closed 4 years ago

intech-paul commented 4 years ago

I initially packaged the line chart demo code into a component, and noticed the size of the chart remained small no matter how I tried to size it. I then took the normal chart demo code and tried to size it there and I get an identical result of graph size.

image

The code to draw a normal chart is: <LineChart @ref="lineChart" TItem="double" />

and the test code is:

<Fields>
<Field ColumnSize="ColumnSize.IsThird.OnDesktop">
    <FieldLabel>text 1</FieldLabel>
    </Field>
    <Field ColumnSize="ColumnSize.IsThird.OnDesktop">
    <FieldLabel><LineChart @ref="lineChart" TItem="double" /></FieldLabel>
    </Field>
    <Field ColumnSize="ColumnSize.IsThird.OnDesktop">
    <FieldLabel>Text 2</FieldLabel>
    </Field>
</Fields>

Is there a correct way to size the chart that I am missing ?

stsrki commented 4 years ago

This should work, source: https://stackoverflow.com/a/49039089/833106

<Fields>
    <Field ColumnSize="ColumnSize.IsThird.OnDesktop">
        <FieldLabel>text 1</FieldLabel>
    </Field>
    <Field ColumnSize="ColumnSize.IsThird.OnDesktop">
        <div class="chart-container">
            <LineChart @ref="lineChart" TItem="double" OptionsObject="new {Responsive=true, MaintainAspectRatio =false}" />
        </div>
    </Field>
    <Field ColumnSize="ColumnSize.IsThird.OnDesktop">
        <FieldLabel>Text 2</FieldLabel>
    </Field>
</Fields>
intech-paul commented 4 years ago

That works for me, heres a really nice sample:

image

This version also solves the chart redrawing issue I had a while ago, when the browser window is sized, the chart position is updated correctly.