# Updating Blazor Bar Series Chart

**URL:** <https://forum.radzen.com/t/updating-blazor-bar-series-chart/5027>\
**Category:** Radzen.Blazor Components\
**Created:** [September 18, 2020, 9:25pm UTC](https://forum.radzen.com/t/updating-blazor-bar-series-chart/5027 "2020-09-18T21:25:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jaydeboer](https://forum.radzen.com/user_avatar/forum.radzen.com/jaydeboer/32/4531_2.png) [@jaydeboer](https://forum.radzen.com/u/jaydeboer)\
**Post date:** [September 18, 2020, 9:25pm UTC](https://forum.radzen.com/t/updating-blazor-bar-series-chart/5027/1 "2020-09-18T21:25:42Z")

</div>

I am sure I am just missing something but I have looked through the docs and played around with this for a while with no success.

I have a bar series chart that receives periodic updates. The bars themselves and corresponding tool-tips update just as I expect them to when new data is received and is added to the collections. What doesn't work as I expected is that axis numbers are not updating, so the bar can grow past the edge of the chart. I cannot seem to figure out how to update the x axis.

Here is a chart after a few updates, notice the value is greater than the x-axis, I would have expected the chart to re-calculate the best fit like it did with the initial data.

 ![Screen Shot 2020-09-18 at 4.21.44 PM](https://forum.radzen.com/uploads/default/original/2X/e/e2c222e310a45367418f435472e7ee14254822a1.png)

Can someone point me in a direction to clean this up?

Thanks much!

Jay

---

<div class="post-metadata">

**Author:** ![korchev](https://forum.radzen.com/user_avatar/forum.radzen.com/korchev/32/4_2.png) [@korchev](https://forum.radzen.com/u/korchev)\
**Post date:** [September 20, 2020, 7:24am UTC](https://forum.radzen.com/t/updating-blazor-bar-series-chart/5027/2 "2020-09-20T07:24:16Z")

</div>

Hi @jaydeboer,

Welcome to the Radzen community!

The chart series update automatically when their Data property changes (by reference - if you just add / remove items it won't be detected as a change). In such cases you can use the Reload method of the chart - you need a reference to it.

```auto
<RadzenChart @ref="myChart" />

<RadzenButton Click=@OnClick />

@code {
     RadzenChart myChart;

     void Click()
     {
        myChart.Reload();
     }
}

```

---

<div class="post-metadata">

**Author:** ![jaydeboer](https://forum.radzen.com/user_avatar/forum.radzen.com/jaydeboer/32/4531_2.png) [@jaydeboer](https://forum.radzen.com/u/jaydeboer)\
**Post date:** [September 29, 2020, 12:36pm UTC](https://forum.radzen.com/t/updating-blazor-bar-series-chart/5027/3 "2020-09-29T12:36:36Z")

</div>

That was what I was missing link. Thanks so much for the help.

Jay

---

<div class="post-metadata">

**Author:** ![Richard\_Davison](https://forum.radzen.com/user_avatar/forum.radzen.com/richard_davison/32/5144_2.png) [@Richard\_Davison](https://forum.radzen.com/u/Richard_Davison)\
**Post date:** [November 29, 2020, 1:20am UTC](https://forum.radzen.com/t/updating-blazor-bar-series-chart/5027/4 "2020-11-29T01:20:45Z")

</div>

I assume there is a similar trick to being able to remove series and add new ones back?  
I was able to do this by replacing the data for the two series in the chart. but the more general question is how do i remove all existing series and add back new ones?

---

<div class="post-metadata">

**Author:** ![Richard\_Davison](https://forum.radzen.com/user_avatar/forum.radzen.com/richard_davison/32/5144_2.png) [@Richard\_Davison](https://forum.radzen.com/u/Richard_Davison)\
**Post date:** [November 29, 2020, 1:41am UTC](https://forum.radzen.com/t/updating-blazor-bar-series-chart/5027/5 "2020-11-29T01:41:29Z")

</div>

Here is what I did as an initial test of just swapping series and titles around.  
Would like to know more about the possibility of creating series in code completely.

```auto
@page "/columnchart"
@using System.Globalization
@using Radzen.Blazor

<h1>Radzen Blazor Chart column series</h1>
<div class="row">
    <div class="col-md-6 col-sm-12 p-4">
        <RadzenChart @ref="chart">
            <RadzenColumnSeries Data="@values1" CategoryProperty="Quarter" Title="@title1" ValueProperty="Revenue" />
            <RadzenColumnSeries Data="@values2" CategoryProperty="Quarter" Title="@title2" ValueProperty="Revenue" />
            <RadzenColumnOptions Radius="5" />
            <RadzenValueAxis Formatter="@FormatAsUSD">
                <RadzenGridLines Visible="true" />
                <RadzenAxisTitle Text="Revenue in USD" />
            </RadzenValueAxis>
        </RadzenChart>
    </div>
</div>
<RadzenButton Click=@(args => OnClick("Button with text")) Text="Button" Style="margin-bottom: 20px; width: 150px" />
@code {

   private RadzenChart chart {get;set;}
    class DataItem
    {
        public string Quarter { get; set; }
        public double Revenue { get; set; }
    }

     protected override Task OnInitializedAsync()
     {

         series1 =values1;
         series1 =values2;

         return base.OnInitializedAsync();
      }

     DataItem[] series1 {get;set;}
     string title1 = "2019";
     DataItem[] series2 {get;set;}
     string title2 ="2020";
 
    string FormatAsUSD(object value)
    {
        return ((double)value).ToString("C0", CultureInfo.CreateSpecificCulture("en-US"));
    }

    DataItem[] values1 = new DataItem[] {
        new DataItem
        {
            Quarter = "Q1",
            Revenue = 234000
        },
        new DataItem
        {
            Quarter = "Q2",
            Revenue = 284000
        },
        new DataItem
        {
            Quarter = "Q3",
            Revenue = 274000
        },
        new DataItem
        {
            Quarter = "Q4",
            Revenue = 294000
        },
    };

    DataItem[] values2 = new DataItem[] {
        new DataItem
        {
            Quarter = "Q1",
            Revenue = 254000
        },
        new DataItem
        {
            Quarter = "Q2",
            Revenue = 324000
        },
        new DataItem
        {
            Quarter = "Q3",
            Revenue = 354000
        },
        new DataItem
        {
            Quarter = "Q4",
            Revenue = 394000
        },

    };

 DataItem[] values3 = new DataItem[] {
        new DataItem
        {
            Quarter = "Q1",
            Revenue = 334000
        },
        new DataItem
        {
            Quarter = "Q2",
            Revenue = 384000
        },
        new DataItem
        {
            Quarter = "Q3",
            Revenue = 374000
        },
        new DataItem
        {
            Quarter = "Q4",
            Revenue = 494000
        },
    };
    void OnClick(string buttonName)
    {
      values1 = values3;
      title1 = "2023";
      chart.Reload();
    }
}

```

---

<div class="post-metadata">

**Author:** ![Richard\_Davison](https://forum.radzen.com/user_avatar/forum.radzen.com/richard_davison/32/5144_2.png) [@Richard\_Davison](https://forum.radzen.com/u/Richard_Davison)\
**Post date:** [November 29, 2020, 1:50am UTC](https://forum.radzen.com/t/updating-blazor-bar-series-chart/5027/6 "2020-11-29T01:50:52Z")

</div>

I found this example. but was hoping for something i could do in code behind ?

```auto
<div class="row">
        <div class="col-md-6 col-sm-12 p-4">
            <RadzenChart ColorScheme="@colorScheme">
                @for (var year = 2013; year <= 2020; year++)
                {
                    var currentYearRevenue = revenue.Where(r => r.Year == year).ToList();
                    <RadzenColumnSeries Data="@currentYearRevenue" CategoryProperty="Quarter" Title="@year.ToString()" ValueProperty="Revenue" />
                }
                <RadzenColumnOptions Margin="0" />
                <RadzenValueAxis Formatter="@FormatAsUSD" />
            </RadzenChart>
        </div>

```

---

<div class="post-metadata">

**Author:** ![korchev](https://forum.radzen.com/user_avatar/forum.radzen.com/korchev/32/4_2.png) [@korchev](https://forum.radzen.com/u/korchev)\
**Post date:** [November 29, 2020, 7:34am UTC](https://forum.radzen.com/t/updating-blazor-bar-series-chart/5027/7 "2020-11-29T07:34:56Z")

</div>

Blazor is a declarative framework. You are not supposed to do things in code behind.