Our Site supports multiple themes that we have built using the SASS Theme Builder. For all Telerik Components we have used so far the theme changes on them as expected when using the example found here (Change Theme at Runtime). The problem seems to be the chart component will not adhere to the newly applied theme after its initial load. Seems like this is because it is shown as an SVG with hardcoded attributes on the element. Is there a workaround for this (other than reloading the components entirely)?

Before & After Theme Change:

Hi,

Just a bug I have found. I have found something similar before with the DateTime format of a category axis.

Please note the single lowercase 't' in the below appears to be being interpreted by the compiler as 'time' identifier (AM or PM). In this case, it is printing on the chart label as 'a'.

<ChartValueAxes>
     <ChartValueAxis AxisCrossingValue="@AxisCrossingValue">
          <ChartValueAxisLabels Format="@("{0}" + " a b c d e f g h i j k l m n o p q r s t u v w x y z")"></ChartValueAxisLabels> 
    </ChartValueAxis>
</ChartValueAxes>

I am trying to customize the format of the ChartCategoryAxisLabels to render the abbreviated name of the day of the week using the following format:

<ChartCategoryAxisLabels Format="ddd dd/MM HH:mm"/>

While it is a valid format, it seems that it doesn't work for the category labels.

---

ADMIN EDIT

---

For the time being, you can use the following to render the abbreviated name of the day of the week in the ChartCategoryAxisLabels:

<ChartCategoryAxisLabels Format="{0:EEE dd/MM HH:mm}"/>

After updating the chart data, some elements remain in the DOM. This can clutter the browser if the data updates come in on intervals and the chart remains in operation for a while. A screenshot is attached below.

MCVE:

The context DataItem is null for subsequent ChartSeries. It receives the correct object for the first ChartSeries, but for the rest is null. 

<Admin Edit>

A workaround, for the time being, would be to remove the Template and let the Tooltip display the default value, which will be correct.

</Admin Edit>

Reproduction code:

<TelerikChart>
    <ChartTitle Text="Unrecoverable Errors Per Minute vs. Signal Level" />
    <ChartCategoryAxes>
        <ChartCategoryAxis Type="@ChartCategoryAxisType.Category" />
    </ChartCategoryAxes>
    <ChartValueAxes>
        <ChartValueAxis>
            <ChartValueAxisLabels Visible="true" />
        </ChartValueAxis>
    </ChartValueAxes>

    <ChartTooltip Visible="true">
        <Template>
            @{
                var data = context.DataItem as ModelData;
                <div class="card" style="font-size: 0.8rem; color: black">
                    <span>@($"{data.Value}")</span>
                    <span>@($"{data.Type}")</span>

                </div>
            }
        </Template>
    </ChartTooltip>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line"
                     Data="@ChartData1"
                     CategoryField="@nameof(ModelData.Type)"
                     Field="@nameof(ModelData.Value)">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line"
                     Data="@ChartData2"
                     CategoryField="@nameof(ModelData.Type)"
                     Field="@nameof(ModelData.Value)">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line"
                     Data="@ChartData3"
                     CategoryField="@nameof(ModelData.Type)"
                     Field="@nameof(ModelData.Value)">
        </ChartSeries>
    </ChartSeriesItems>

</TelerikChart>

@code {
    public class ModelData
    {
        public string Type { get; set; }
        public double Value { get; set; }
    }

    public List<ModelData> ChartData1 = new List<ModelData>() { new ModelData() { Type = "S1", Value = 1 } };
    public List<ModelData> ChartData2 = new List<ModelData>() { new ModelData() { Type = "S2", Value = 5 } };
    public List<ModelData> ChartData3 = new List<ModelData>() { new ModelData() { Type = "S3", Value = 9 } };
}

Hi!

I'm building a Blazor Component using your TelerikChart.  To build my chart, I'm dynamically inserting the series name and the series data, which is pulled from a list.  I also have a button on the page that changes the dataset (last month, this month, next month, etc).  The button will rebuild the list of names and data, and Blazor will build the chart with a 'foreach' entry in the ChartSeriesItems section of the Chart Component.

The problem is that the Items are not cleared each time.  When I click the button, I'm getting previous values. In the example below, I have 3 data sets.  The first has 4 items, the second has 8 and the third has 6.  If the user clicks the second, showing all 8, then clicks the first, the chart will show the new 4, and the previous 5-8 from the second set.  

 My chart description in HTML is:

... 
<ChartSeriesItems>
    @foreach(Tuple<string, object[]> t in myData)
    {
       <ChartSeries Type="ChartSeriesType.Column" Name=@t.Item1 Data=@t.Item2 />
    }
</ChartSeriesItems>
... 

I have checked my data through debugging to ensure that the myData variable is correct (i.e. when I click the first data, it only has 4 items).  However, when the chart displays, it shows 8 items. 

Is there a CLEARDATA method or something I can call on the Chart to ensure that the data is reset each time?  I see that there is a Clear() in JavaScript, but I'm writing in only Blazor and C#, with no JavaScript.

I've attached the .razor page for your reference.  (As this is my test code, I'm using random number generation to get the data.)

Thank you so much for your help!!

-Cheryl Simpson