Sparkline on Card

Radzen.Blazor Components
1

Hi

I'm trying to present a sparkline on a card but it doesn't want to be contained. The chart seems to be rendered into an svg with a large amount of top padding, so it's appearing outside and below the card itself. I would like the card to have a height of 100px and be slit into to equal sized areas. Area on left to contain a sparkline showing data item history and area on the right showing label and current value. This is my code:

<RadzenCard Style="margin: 0px; height: 100px;">
                <div class="row">
                    <div class="col-6 m-0 p-0">
                        <RadzenChart>
                            <RadzenAreaSeries Smooth="false"
                                              Data="@Data["scalars"].Find(x => x.Label == "In Waiting Room").HistoryList"
                                              CategoryProperty="Label"
                                              ValueProperty="Value"
                                              Stroke="#c70000"
                                              StrokeWidth="1"
                                              Fill="#ffe6e6" />
                            <RadzenLegend Visible="false" />
                            <RadzenGridLines Visible="false" />
                            <RadzenValueAxis Visible="false" />
                            <RadzenCategoryAxis Visible="false" />
                            <RadzenChartTooltipOptions Visible="false" />
                        </RadzenChart>
                    </div>
                    <div class="col-6">
                        <h4>Waiting Room</h4>
                        <h3>@Data["scalars"].Find(x => x.Label == "In Waiting Room").Value</h3>
                    </div>
                </div>
            </RadzenCard>

Any ideas?

Thanks

Joe

2

Hi @Joe,

Try setting the width and height of the chart:

<RadzenChart style="width: 100%; height:100px">
3

That hasn't had the desired effect. It seems more to do with the chart area that's rendered. Here is a screen grab:

Capture
Capture423×197 3.33 KB

I've put a border round the chart for illustration only. I'm wanting to remove the whitespace above, below, and to the right of the line. The aim is to have this sitting in the left-hand side of the card, and the label and value in the right.

4

RadzenCard has padding of its own. You may want to remove it. Here is what I was able to achieve:

image
image1454×296 13.4 KB

<RadzenCard style="height: 100px; padding: 0">
    <div class="row">
        <div class="col-6 m-0">
            <RadzenChart style="padding-left: 20px; height: 100px">
                <RadzenAreaSeries Smooth="@smooth" Data="@revenue2019" CategoryProperty="Date" Title="2019"
                    ValueProperty="Revenue" Stroke="#c70000" StrokeWidth="1" Fill="#ffe6e6">
                </RadzenAreaSeries>
                <RadzenLegend Visible="false" />
                <RadzenGridLines Visible="false" />
                <RadzenValueAxis Visible="false" />
                <RadzenCategoryAxis Visible="false" />
                <RadzenChartTooltipOptions Visible="false" />
            </RadzenChart>
        </div>
        <div class="col-6">
            <h4>Waiting Room</h4>
        </div>
    </div>
</RadzenCard>

You can tweak it further per your needs.

5

You are a superstar, that's done it. Thank you so much!

6

Hi Korchev

Is there a way to remove all white space around the chart? When I view a sparkline chart in dev tools, it still seems to be surrounded with a minimum amount of padding/margin, even when I set:

What's the minimum height you can make a line chart?

Thanks

Joe

7

No at the moment.

We haven't tested with that.