Questions on UI for Blazor Forum

1 answer

78 views

ChartCategoryAxisBaseUnit - show interpolation in axis but don't change data map point?

If I use ChartCategoryAxisBaseUnit.Years the X-axis looks great.

However, if the data doesn't have any entry for every year (rates don't necessarily change every year) I get an odd chart with dips for the years where no rate was changed, resulting in this:

As you can see, dip in 2011. I don't want to see a dip as it's not representative, what I want to see is a straight line going up from 2010 to 2012 as the 2011 is really just an interpolated label for the X axis.

Is there a solution to this issue?

Rob

Charts

answered on 19 Dec 2025

1 answer

51 views

Why 3 Carl?

Hi, I try to use Gantt so i bump into it doesn't have summery row template?

I understood that everyone is busy, so i started to explore rendered html of gantt and found 3 timeline tables! while try to fix bug with not synced scroll this code o got from here https://www.telerik.com/blazor-ui/documentation/components/gantt/timeline/templates/task

look:

Charts

Gantt

answered on 18 Dec 2025

1 answer

58 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

56 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

41 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

84 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

79 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

94 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

142 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

98 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