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

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?

<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>

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.

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

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

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

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

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.

I want to show a series of pie charts but with the series labels on top of each section like so:

I haven't found anything that suggests the labels can be anywhere except attached by lines. Is this possible?

On the Telerik website, more specifically on Blazor Charts and Graphs - Overview, you can find a nice example of how to change the theme of the charts displayed. We would like to implement something like this in our project. However, a change in the theme affects the entire project. However, we would like the entire project not to be changed and the change in the theme only affects the Telerik chart.

I would like to know if anyone has a good idea for us.