Questions on UI for Blazor Forum

1 answer

12 views

Incorrect tooltip information in Chart when using MissingValues="ChartSeriesMissingValues.Zero"

Hi Telerik Team,

Tooltip information at the first {DataCollectionSizeNumber pasted here} values is incorrect when setting MissingValues="ChartSeriesMissingValues.Zero".
The chart series-line is displayed properly - the value that is missing should be 0 and it's displayed visually as 0.

<TelerikChart>
    <ChartTitle Text="MissingValues.Zero Tooltip Bug (No Nulls)"></ChartTitle>
    <ChartTooltip Visible="true"></ChartTooltip>
    <ChartLegend Position="ChartLegendPosition.Bottom"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line"
                     Name="Sample Series"
                     Data="@Data"
                     Field="@nameof(ChartP.Count)"
                     CategoryField="@nameof(ChartP.Category)"
                     MissingValues="ChartSeriesMissingValues.Zero"
                     Style="ChartSeriesStyle.Normal">
            <ChartSeriesTooltip Visible="true" Context="ctxt">
                <Template>
                    @{
                        var point = ctxt.DataItem as ChartP;
                    }
                    <div style="font-size:13px;">
                        <strong>Category:</strong> @point?.Category.ToString("yyyy-MM-dd HH:mm")<br />
                        <strong>Count:</strong> @point?.Count<br />
                        <strong>Extra:</strong> @point?.ExtraInfo
                    </div>
                </Template>
            </ChartSeriesTooltip>

            <ChartSeriesMarkers Visible="false" Type="ChartSeriesMarkersType.Circle" Size="6">
                <ChartSeriesMarkersBorder Width="1" />
            </ChartSeriesMarkers>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Min="@StartOfDayLocal" Max="@EndOfDayLocal" Type="ChartCategoryAxisType.Date"
                           BaseUnit="ChartCategoryAxisBaseUnit.Minutes" BaseUnitStep="15">
            <ChartCategoryAxisLabels Format="{0:HH:mm}" Step="4">
                <ChartCategoryAxisLabelsRotation Angle="45" />
            </ChartCategoryAxisLabels>
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartValueAxes>
        <ChartValueAxis>
            <ChartValueAxisLabels Format="{0}" />
        </ChartValueAxis>
    </ChartValueAxes>
</TelerikChart>

@code {
    public class ChartP
    {
        public DateTime Category { get; set; }  // X axis
        public int Count { get; set; }          // Y value
        public string? ExtraInfo { get; set; }  // Info for tooltip
    }

    private static DateTime StartOfDayLocal =>
    DateTime.SpecifyKind(DateTime.Today, DateTimeKind.Local);
    private DateTime EndOfDayLocal => StartOfDayLocal.AddDays(1);

    public List<ChartP> Data = new()
    {
        new ChartP { Category = StartOfDayLocal.AddHours(2), Count = 5, ExtraInfo = "Real Point A" },
        new ChartP { Category = StartOfDayLocal.AddHours(3), Count = 7, ExtraInfo = "Real Point B" },
        new ChartP { Category = StartOfDayLocal.AddHours(4), Count = 3, ExtraInfo = "Real Point C" },
        new ChartP { Category = StartOfDayLocal.AddHours(5), Count = 2, ExtraInfo = "Real Point D" },
    };
}

Am I doing something wrong or this is a bug?

Regards,
Bohdan

Charts

updated answer on 12 Sep 2025

1 answer

21 views

How to hide items from the legend?

I have a chart that shows different data but for same group data. I re-use the color between the area and column series since thay are about the same source data group. This makes my legend report each item tweice, which I do not want.

How can I disable legend item visibility for one series, but keep visibilitie for other series?

TIA - Hans

Charts

updated answer on 19 Aug 2025

1 answer

25 views

Sankey chart data is not loading

when i provide hardcoded data chart gets populated but on providing record from db the chart gets blank.
this is my raozr page
" <div class="row ">
<div class="col-12">
<div id="chart-section" class="card chart-card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<h5 class="card-title mb-0">
<i class="fas fa-project-diagram me-2 text-primary"></i>
Deal Flow Analysis
</h5>
@* <div class="d-flex gap-2">
<button class="btn btn-sm btn-outline-primary">
<i class="fas fa-expand-arrows-alt"></i>
</button>
<button class="btn btn-sm btn-outline-primary">
<i class="fas fa-cog"></i>
</button>
</div> *@
</div>
<TelerikSankey Data="@Data">

<SankeyLinks ColorType="@SankeyLinksColorType.Static"></SankeyLinks>
<SankeyLabels>
<SankeyLabelsStroke Color="none"></SankeyLabelsStroke>
</SankeyLabels>
</TelerikSankey>
</div>
</div>
</div>
</div>"
this is how i am binding my data
" private void GenerateSankeyData()
{
if (hubspotDealStagesDtos == null || !hubspotDealStagesDtos.Any() || hubDealData == null)
return;

var newNodes = new SankeyDataNodes();
var newLinks = new SankeyDataLinks();

var orderedStages = hubspotDealStagesDtos.OrderBy(s => s.DisplayOrder).ToList();
foreach (var stage in orderedStages)
{
newNodes.Add(new SankeyDataNode
{
Id = stage.HubspotId,
Label = new SankeyDataNodeLabel { Text = stage.Label }
});
}

foreach (var group in hubDealData.GroupBy(x => x.DealStage))
{
if (!int.TryParse(group.Key.ToString(), out int validId))
continue;

double value = selectedViewBy == "value"
? group.Sum(x => x.Amount)
: group.Count();

newLinks.Add(new SankeyDataLink
{
SourceId = 0,

TargetId = validId,
Value = value
});
}

Data.Nodes.Clear();
Data.Links.Clear();

foreach (var node in newNodes)
Data.Nodes.Add(node);

foreach (var link in newLinks)
Data.Links.Add(link);

StateHasChanged();
}"
need help in this regard

Charts

answered on 14 Jul 2025

0 answers

45 views

Disable touch events on Telerik Chart

I am using a Column Chart component inside my Blazor application.

When viewed on a mobile screen, the user is unable to pan the window, because i think the chart registers this as an event. If the user touches the chart, they cannot scroll the window anymore.

I am not using any additional events on my chart, it does not need any interaction.

How can I adjust the chart so that it can be touched and scrolled?

Code snippet:

<div style="@((DialogOpen) ? "visibility: hidden;" : "visibility: visible;")">
    <TelerikChart Height="200px">
        <ChartZoomable Enabled="false"></ChartZoomable>
        <ChartPannable Enabled="false"></ChartPannable>

        <ChartSeriesItems>
            <ChartSeries Type="ChartSeriesType.Column" Name="min/100m" Data="@GraphData" Field="@nameof(GraphData)" Color="#9edfff">
            </ChartSeries>
        </ChartSeriesItems>

        <ChartCategoryAxes>
            <ChartCategoryAxis Categories="@GraphX.ToArray()"></ChartCategoryAxis>
        </ChartCategoryAxes>

        <ChartLegend Position="ChartLegendPosition.Bottom">
        </ChartLegend>

        <ChartTitle Text=""></ChartTitle>
    </TelerikChart>
</div>

Charts

asked on 10 Jun 2025

1 answer

41 views

TelerikChart X-Axis Misinterprets Double Values as Categories in Blazor

Hello,

I'm having trouble configuring a TelerikChart in Blazor to properly display a column series and a line series side-by-side on the same chart.

My goal is to have the X-axis (CategoryAxis) reflect double values (e.g. 0, 5, 10, 15...) so that both series are aligned and spaced proportionally based on their actual numeric X values.

However, what I'm observing is that the X-axis seems to treat these values as categories or strings, not real numbers. This results in incorrect spacing and ordering.

What's going wrong:

The columns are not placed in the correct positions on the X-axis — for instance, a column with X = 6 appears at the far end if 6 doesn't also exist in the line series.

The values on the X-axis are not sorted numerically — so the spacing between, say, 5 and 10 is the same as between 10 and 1024, which breaks the scale.

Ideally, I want the chart to understand that X = 1024 is far from X = 50, and space it accordingly on a continuous numeric scale.

You can see the visual chart below:

The code for the chart:

@page "/test"
@using ChartLegendPosition=Telerik.Blazor.ChartLegendPosition
@using ChartSeriesType=Telerik.Blazor.ChartSeriesType
<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line" Name="Normal Distribution" Data="@series2Data" Field="Y" CategoryField="X" CategoryAxis="Category" Axis="Value" Style="@ChartSeriesStyle.Smooth" Color="blue">
            <ChartSeriesMarkers Visible="false"/>
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Column" Name="Histogram" Field="Y" CategoryField="X" CategoryAxis="Category" Axis="Value2" Data="@series1Data">
        </ChartSeries>
    </ChartSeriesItems>
    
    <ChartValueAxes>
        <ChartValueAxis Name="Value"></ChartValueAxis>
        <ChartValueAxis Name="Value2"></ChartValueAxis>
    </ChartValueAxes>
    
    <ChartCategoryAxes>
        <ChartCategoryAxis Name="Category">
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

    <ChartLegend Position="ChartLegendPosition.Right">
    </ChartLegend>
</TelerikChart>

@code {
    public List<Point> series1Data = new List<Point>()
    {
        new Point { X = 0, Y = 1 },
        new Point { X = 6, Y = 2 },
        new Point { X = 12, Y = 3 },
        new Point { X = 18, Y = 4 },
        new Point { X = 24, Y = 5 },
        new Point { X = 30, Y = 6 },
        new Point { X = 36, Y = 7 },
        new Point { X = 42, Y = 8 },
        new Point { X = 48, Y = 9 },
        new Point { X = 1024, Y = 10 },
    };

    public List<Point> series2Data = new List<Point>()
    {
        new Point { X = 0, Y = 0.01 },
        new Point { X = 5, Y = 0.02 },
        new Point { X = 10, Y = 0.05 },
        new Point { X = 15, Y = 0.1 },
        new Point { X = 20, Y = 0.2 },
        new Point { X = 25, Y = 0.35 },
        new Point { X = 30, Y = 0.5 },
        new Point { X = 35, Y = 0.7 },
        new Point { X = 40, Y = 0.85 },
        new Point { X = 45, Y = 0.95 },
        new Point { X = 50, Y = 1.0 },
        new Point { X = 55, Y = 0.95 },
        new Point { X = 60, Y = 0.85 },
        new Point { X = 65, Y = 0.7 },
        new Point { X = 70, Y = 0.5 },
        new Point { X = 75, Y = 0.35 },
        new Point { X = 80, Y = 0.2 },
        new Point { X = 85, Y = 0.1 },
        new Point { X = 90, Y = 0.05 },
        new Point { X = 95, Y = 0.02 },
        new Point { X = 100, Y = 0.01 }
    };

    
    public class Point
    {
        public double X { get; set; }
        public double Y { get; set; }
    }
    
    // protected override void OnInitialized()
    // {
    //     var samples = new double[] {0, 3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48, 51, 54, 57, 60, 63, 66, 69, 72, 75, 78, 81, 84, 87, 90, 93};
    //     var std = StatisticsHelper.StandardDeviation(samples);
    //     var average = samples.Average();
    //     var yValues = StatisticsHelper.CalculateProbabilityDensityValues(samples.ToList(), std, average);
    //     
    //     series2Data = samples
    //         .Zip(yValues, (x, y) => new DistributionPoint { X = x, Y = y })
    //         .ToList();
    //     
    //     base.OnInitialized();
    // }
}

Does TelerikChart support a numeric X-axis instead of a CategoryAxis?
If so, should I be using a ChartValueAxis for the X-axis instead of a ChartCategoryAxis?

Is there a recommended way to configure a dual-axis chart where both the column and line series share a numeric X-axis?
I'd like the spacing to be consistent and reflect the actual distance between values.

PS: I also tried this with XAxes instead of CategoryAxes. But the same issue occurs.
Also I tried to use ascatterline instead of line. with type numeric on the x-axis. But then I cant add the column on that axis.

If you need more information, or if the issue is unclear, feel free to ask.

Charts

answered on 21 May 2025

1 answer

54 views

Run function on mouse hover

Hi,

Is there a way to trigger a method and pass data to it when hovering over a line in a line chart?

Regards,

Omar

Charts

answered on 23 Apr 2025

1 answer

101 views

Adding OnZoom event for TelerikChart Zooming

Hey,

I am working on a Telerik for Blazor UI project and I'm really liking alll the Telerik features so far. However, when there are too many data points on my graph, the x axis becomes really hard to read, so I added a feature to scale the number of visible x-axis categories based on the number of intervals.

For this purpose, I was hoping to add a feature so that when one zooms into the graph, more of the x-axis intervals become visible based on how many can comfortably fit on screen. To this end, I need to know how much a user has zoomed in so that I can scale things accordingly. However, from all I can find online, there is no way to query a TelerikChart for how zoomed in you are. I might be missing something, but in case I am not, I think this feature could be very helpful so that one can add events based on the zoom in and have things change accordingly.

Thanks

Charts

answered on 17 Feb 2025

1 answer

67 views

Chart Legend issue after Upgrade from Blazor 3.7 to 7.1

Hi,

I upgrades a Blazor Projekt from net 6, Blazor 3.7 to net 8, Blazor 7.1.
I handled all breaking changes, so it works now.
There is only an issue with the legend style : in 3.7 only the line is shown. But in 7.1 a dot with line.
The code of my chart control was not changed from 3.7 to 7.1.

<TelerikChart Height="200px">
    <ChartPlotArea Background="#FAFAFA"></ChartPlotArea>
    <ChartTooltip Visible="true"></ChartTooltip>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Scatter" Name="@($"{AxleNumber}: {right_text}")" Data="@chartRight" Color="#ff8400"
                     XField="@nameof(ChartDataViewModel.start)"
                     YField="@nameof(ChartDataViewModel.Indicator)" Visible="@right_visible">
            <ChartSeriesMarkers Type="ChartSeriesMarkersType.Circle" Size="4" Background="#ff8400" />
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Scatter" Name="@($"{AxleNumber}: {left_text}")" Data="@chartLeft" Color="#0071ff"
                     XField="@nameof(ChartDataViewModel.start)"
                     YField="@nameof(ChartDataViewModel.Indicator)" Visible="@left_visible">
            <ChartSeriesMarkers Type="ChartSeriesMarkersType.Circle" Size="4" Background="#0071ff" />
        </ChartSeries>
    </ChartSeriesItems>
    <ChartYAxes>
        <ChartYAxis Max="YAxis_Max" Min="YAxis_Min" />
    </ChartYAxes>
    <ChartXAxes>
        <ChartXAxis Type="date" BaseUnit="days">
            <ChartXAxisLabels Format="{0:dd.MM.yy}"></ChartXAxisLabels>
        </ChartXAxis>
    </ChartXAxes>
    <ChartLegend Position="ChartLegendPosition.Custom" OffsetX="50" OffsetY="10" Height="10" Visible="@(right_visible && left_visible)" />
</TelerikChart>

How can I get back to old Legend style?

Peter

Charts

answered on 21 Jan 2025

1 answer

66 views

Charts: prevent no data template

Dear Telerik Support team,

as of version 7.1.0 the No Data Template was introduced for Charts and I was wondering, if there's any chance to prevent the chart of rendering the no data template, when none is defined and needed.

In my case I'd rather display an empty chart, instead of the no data template.

Any way to accomplish that?

Many thanks!
Thomas

Charts

answered on 10 Jan 2025

0 answers

71 views

NoDataTemplate shows for TelerikChart when there's data

I'm working from this demo to use NoDataTemplate with a TelerikChart. The demo works for me in the link but locally, the NoDataTemplate is always visible regardless of whether there's data in the chart. I copied the files from that demo to a test project and still can't get the NoDataTemplate to disappear.

I have the test project here and the chart is in the Test.razor page.

Charts

asked on 17 Dec 2024