Blazorise: Blazor 0.9 chart size not being scaled properly - always small

Created on 22 Apr 2020  路  2Comments  路  Source: stsrki/Blazorise

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:

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 ?

Question

All 2 comments

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>

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tarafdarmansour picture tarafdarmansour  路  3Comments

imtrobin picture imtrobin  路  4Comments

Andy74 picture Andy74  路  4Comments

brettwinters picture brettwinters  路  4Comments

brettwinters picture brettwinters  路  5Comments