When I place a Chart in a small container, for example, a div, the labels are cut off and thus unreadable.
===
ADMIN EDIT
===
A possible workaround for the time being is changing the position of the labels so they are not cut off. For example: https://blazorrepl.telerik.com/mHkNkCEC16hMJnTg26.
I am creating a Donut Chart and believe I have found a bug. On the initial load of the page, the donut chart element is not playing its animation when the label property "Visible=false". Instead, it pops on with no animation. The animations do play on the drilldown elements on their initial loads, but clicking the refresh chart button also causes this behavior even on drilldown levels. Resetting the drilldown also causes this behavior. The chart legend remains visible during the time when the chart is not. Setting the labels visible property to true causes the animations to play correctly. This proof of concept utilizes static data. The application was created using the telerik templates and is correctly injecting the telerik components as all other telerik components, including other chart components, are functioning as expected. I have isolated the code for the donut chart and posted it here.
<TelerikButton OnClick="@(() => DonutChart.Refresh())">Refresh Donut Chart</TelerikButton>
<TelerikButton OnClick="@(() => DonutChart.ResetDrilldownLevel(0))">Reset DrillDown</TelerikButton>
<!-- Donut Chart -->
<TelerikChart @ref="DonutChart">
<ChartTitle Text="Donut Chart" />
<ChartLegend Position="Telerik.Blazor.ChartLegendPosition.Right" />
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Donut"
Data="@donutData"
Field="@nameof(DonutModel.Number)"
CategoryField="@nameof(DonutModel.Category)"
ColorField="@nameof(DonutModel.SegmentColor)"
DrilldownField="@nameof(DonutModel.DrillDown)">
<ChartSeriesBorder Color="white" Width="2" />
<ChartSeriesLabels Position="ChartSeriesLabelsPosition.Above"
Visible="false"
Background="transparent">
</ChartSeriesLabels>
</ChartSeries>
</ChartSeriesItems>
</TelerikChart>
@code {
// Donut Chart
public TelerikChart DonutChart;
public class DonutModel
{
public string Category { get; set; }
public int Number { get; set; }
public string SegmentColor { get; set; }
public ChartSeriesDescriptor? DrillDown { get; set; }
}
public List<DonutModel> donutData = new List<DonutModel>
{
new DonutModel
{
Category = "Category 1 with Drilldown",
Number = 263,
SegmentColor = "#9d3cc7",
DrillDown = new ChartSeriesDescriptor
{
Name = "Drilldowns",
Type = ChartSeriesType.Donut,
Field = nameof(DonutModel.Number),
CategoryField = nameof(DonutModel.Category),
DrilldownField = nameof(DonutModel.DrillDown),
Data = new List<DonutModel>()
{
new DonutModel
{
Category = "Drill Down 1",
Number = 102,
SegmentColor = "#9d3cc7",
DrillDown = new ChartSeriesDescriptor
{
Name = "People",
Type = ChartSeriesType.Donut,
Field = nameof(DonutModel.Number),
CategoryField = nameof(DonutModel.Category),
Data = new List<DonutModel>()
{
new DonutModel
{
Category = "John Doe",
Number = 27,
SegmentColor = "#9d3cc7"
},
new DonutModel
{
Category = "David Smith",
Number = 45,
SegmentColor = "green"
},
new DonutModel
{
Category = "Mary Johnson",
Number = 63,
SegmentColor = "yellow"
},
new DonutModel
{
Category = "Robert Brown",
Number = 56,
SegmentColor = "orange"
}
}
}
},
new DonutModel
{
Category = "Drilldown 2",
Number = 67,
SegmentColor = "green",
DrillDown = new ChartSeriesDescriptor
{
Name = "People",
Type = ChartSeriesType.Donut,
Field = nameof(DonutModel.Number),
CategoryField = nameof(DonutModel.Category),
Data = new List<DonutModel>()
{
new DonutModel
{
Category = "John Doe",
Number = 15,
SegmentColor = "#9d3cc7"
},
new DonutModel
{
Category = "David Smith",
Number = 17,
SegmentColor = "green"
},
new DonutModel
{
Category = "Mary Johnson",
Number = 19,
SegmentColor = "yellow"
},
new DonutModel
{
Category = "Robert Brown",
Number = 16,
SegmentColor = "orange"
}
}
}
},
new DonutModel
{
Category = "Drilldown 3",
Number = 10,
SegmentColor = "orange",
DrillDown = new ChartSeriesDescriptor
{
Name = "People",
Type = ChartSeriesType.Donut,
Field = nameof(DonutModel.Number),
CategoryField = nameof(DonutModel.Category),
Data = new List<DonutModel>()
{
new DonutModel
{
Category = "John Doe",
Number = 3,
SegmentColor = "#9d3cc7"
},
new DonutModel
{
Category = "David Smith",
Number = 4,
SegmentColor = "green"
},
new DonutModel
{
Category = "Mary Johnson",
Number = 1,
SegmentColor = "yellow"
},
new DonutModel
{
Category = "Robert Brown",
Number = 2,
SegmentColor = "orange"
}
}
}
}
}
}
},
new DonutModel
{
Category = "Category 2 with no Drilldown",
Number = 31,
SegmentColor = "#fab933"
}
};
If a Chart is recreated at runtime and the mouse cursor is over the component, a JavaScript error may occur:
Error: Microsoft.JSInterop.JSException: null is not an object (evaluating 'e.top')
A possible workaround is to delay the Chart tooltip initialization a little:
<TelerikDrawer Data="@NavigablePages" Expanded="true" MiniMode="true" Mode="@DrawerMode.Push">
<DrawerContent>
<TelerikGridLayout>
<GridLayoutItems>
<GridLayoutItem Column="1">
<TelerikCard Width="300px" Height="400px">
<CardHeader>
<CardTitle>CARD 1</CardTitle>
</CardHeader>
<CardBody>
@if (IsLoading)
{
<span style="height:100%">...loading...</span>
}
else
{
<TelerikChart Transitions=@false>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Donut" Data="@donutData"
Field="@nameof(MyDonutChartModel.SegmentValue)" CategoryField="@nameof(MyDonutChartModel.SegmentName)">
<ChartSeriesTooltip Visible="@IsChartTooltipVisible" Background="#222731" Color="#FFFFFF">
<Template>
@((context.DataItem as MyDonutChartModel)?.Tooltip)
</Template>
</ChartSeriesTooltip>
</ChartSeries>
</ChartSeriesItems>
</TelerikChart>
}
</CardBody>
</TelerikCard>
</GridLayoutItem>
<GridLayoutItem Column="2">
<TelerikCard Width="300px" Height="400px">
<CardHeader>
<CardTitle>CARD 2</CardTitle>
</CardHeader>
<CardBody>
<TelerikButton OnClick="@OnClickHandler">REFRESH CHART</TelerikButton>
</CardBody>
</TelerikCard>
</GridLayoutItem>
</GridLayoutItems>
</TelerikGridLayout>
</DrawerContent>
</TelerikDrawer>
@code{
public bool IsLoading { get; set; } = false;
public bool IsChartTooltipVisible { get; set; } = true;
private async Task OnClickHandler()
{
IsLoading = true;
IsChartTooltipVisible = false;
// Simulate API call
await Task.Delay(2000);
IsLoading = false;
// Force the Chart to render
StateHasChanged();
// Delay the Chart Tooltip initialization
await Task.Delay(100);
IsChartTooltipVisible = true;
}
List<DrawerItem> NavigablePages { get; set; } = new List<DrawerItem>
{
new DrawerItem { Text = "Home", Icon = SvgIcon.Home }
};
public class DrawerItem
{
public string Text { get; set; }
public ISvgIcon Icon { get; set; }
}
public class MyDonutChartModel
{
public string SegmentName { get; set; }
public double SegmentValue { get; set; }
public string Tooltip { get; set; }
}
public List<MyDonutChartModel> donutData = new List<MyDonutChartModel>
{
new MyDonutChartModel
{
SegmentName = "Product 1",
SegmentValue = 2,
Tooltip = "Tooltip 1"
},
new MyDonutChartModel
{
SegmentName = "Product 2",
SegmentValue = 3,
Tooltip = "Tooltip 2"
},
new MyDonutChartModel
{
SegmentName = "Product 3",
SegmentValue = 4,
Tooltip = "Tooltip 3"
}
};
}
The Chart tooltip template receives incorrect context for another data item when there is a missing data item for the current category and the series has MissingValues="@ChartSeriesMissingValues.Zero".
Test page: https://blazorrepl.telerik.com/QzOtFwln362xLl7q57
Compare with the Kendo UI jQuery Chart: https://dojo.telerik.com/qZCFVOPQ
Possible workarounds include:
- Check the FormattedValue property of the tooltip context. If it's "0", while the value in the DataItem is not zero, then there is a missing data item.
<TelerikChart Height="200px"> <ChartSeriesItems> <ChartSeries Type="ChartSeriesType.Line" Data="@Series1Data" Field="@nameof(SalesData.Revenue)" CategoryField="@nameof(SalesData.TimePeriod)" MissingValues="@ChartSeriesMissingValues.Zero"> <ChartSeriesLabels Visible="true"></ChartSeriesLabels> <ChartSeriesTooltip Visible="true"> <Template> @{ var point = context.DataItem as SalesData; } @if (point is not null && context.FormattedValue != "0") { <span>@point.Revenue</span> } else { <span>0 (no data item)</span> } </Template> </ChartSeriesTooltip> </ChartSeries> </ChartSeriesItems> <ChartCategoryAxes> <ChartCategoryAxis Min="@ChartCategoryAxisMin" Type="@ChartCategoryAxisType.Date"></ChartCategoryAxis> </ChartCategoryAxes> </TelerikChart> - Set MissingValues to Gap or Interpolate.
- Provide dummy data items with a zero or null value. These dummy items depend on the Min and Max axis values and can be appended after the Chart data is retrieved from the data source, so that they are not hard-coded there.
- Do not use a Chart tooltip template.
---
ADMIN EDIT
Screen recording attached below, code to reproduce it too.
---
Can the dev team comment on any known reasons why Charts (I think both SVG and Canvas) might not display when a blazor page is rendered from an automation tool like Chromium, Puppeteer, etc.? (e.g., https://developers.google.com/web/tools/puppeteer).
I have a standard blazor page that I can manually from a standard Chrome window, and it works fine and the Telerik chart displays.
But the same page, when launched either headless or with a GUI browser window, from a tool like Chromium or Puppeteer (with javascript enabled of course), it seems like the DOM is never dynamically updated to include the chart.
For real-time data purposes, I need to update the data and add new items. If I drill down and then add a new item, the Chart refreshes and goes to the top page (resets the drill down level to 0).
Reproduction: https://blazorrepl.telerik.com/QeOtQaOD46j4I3Ih46.
Hi, I can't figure how to use the Min/Max properties of the ChartCategoryAxis because if I set these properties, the chart disappears.
Please help me.
@page "/"
<TelerikChart>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Line" Name="Test" Data="@mesures"
Field="@nameof(Mesure.Value)" CategoryField="@nameof(Mesure.Date)" Aggregate="ChartSeriesAggregate.Sum">
</ChartSeries>
</ChartSeriesItems>
<ChartCategoryAxes>
<!-- This is OK -->
@*<ChartCategoryAxis BaseUnit="ChartCategoryAxisBaseUnit.Hours" Type="ChartCategoryAxisType.Date" BaseUnitStep="1"></ChartCategoryAxis>*@
<!-- This isn't : nothing is displayed -->
<ChartCategoryAxis Min="@MinDate" Max="@MaxDate" BaseUnit="ChartCategoryAxisBaseUnit.Hours" Type="ChartCategoryAxisType.Date" BaseUnitStep="1"></ChartCategoryAxis>
</ChartCategoryAxes>
</TelerikChart>
@code {
private DateTime MinDate { get; set; } = new DateTime(2019, 01, 01, 13, 0, 0);
private DateTime MaxDate { get; set; } = new DateTime(2019, 01, 01, 17, 0, 0);
public class Mesure
{
public DateTime Date { get; set; }
public int Value { get; set; }
}
public List<Mesure> mesures = new List<Mesure>()
{
new Mesure() { Date = new DateTime(2019, 01, 01, 13, 0, 0), Value = 1 },
new Mesure() { Date = new DateTime(2019, 01, 01, 14, 0, 0), Value = 2 },
new Mesure() { Date = new DateTime(2019, 01, 01, 14, 30, 0), Value = 3 },
new Mesure() { Date = new DateTime(2019, 01, 01, 14, 35, 0), Value = 4 },
new Mesure() { Date = new DateTime(2019, 01, 01, 15, 0, 0), Value = 5 },
new Mesure() { Date = new DateTime(2019, 01, 01, 16, 0, 0), Value = 6 },
new Mesure() { Date = new DateTime(2019, 01, 01, 17, 0, 0), Value = 7 },
};
}
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:
To reproduce the problem, hover over the last value of the series. While the Tooltip enters, it causes horizontal and vertical scroll and flickers. Then, it is positioned correctly.
The issue is better observed if you increase the transition speed of the Tooltip wrapper.
Reproduction: https://blazorrepl.telerik.com/cREDloaV42j7Z19G13.
===
ADMIN EDIT
===
A possible workaround for the time being is to alter or stop the Tooltip animation with CSS. Here is a runnable sample demonstrating the approach: https://blazorrepl.telerik.com/QnEjvIOC04hXA6W709
The Scatterline Chart is flipped upside down if the Height is under 100px.
Reproduction1. Run this REPL
2. Set the height of the Chart to 90px
3. The chart is rendered upside down
Hi,
We are implementing chart control in our application and we noticed spikes in the chart when we are using time series that contains UTC timestamps with milliseconds that are divisible by 100. The issue is reproduceable on Telerik REPL as well and I am attaching the REPL link as well
I was wondering if you guys can provide some insight from your end as to whether that is indeed a bug and some work arounds and timeline on when we can resolution from your end.
Cheers,
Danish Shahid
Currently, the Chart does not plot anything when zero values are included in the dataset on a logarithmic axis.
Reproduction: https://blazorrepl.telerik.com/cdYgkWFH23W9PVon54
At least the "Success" data should be plotted.
I am trying to programmatically update the Chart data during runtime to display live data. The Chart does not seem to refresh and show this change in the viewport.
I've tried:
- using an Observable Collection;
- creating a new collection instance and reassigning the Data parameter;
- calling the Refresh method;
The result is the same - the Chart does not react to the data change. This applies to other component parameters as well.
===
ADMIN EDIT
===
A possible workaround for the time being is forcing the Chart to re-render. To do so, you may wrap the Chart in a custom component and call StateHasChanged() in this component when the data is updated.Here is a runnable sample: https://blazorrepl.telerik.com/wxEzwxbJ24WDjnMp11.
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 discovered this as my original unit was 'Count' which was being displayed at runtime on the chart as 'Couna'.