Currently, the HighlightAppearance of the Series does not have a property that controls the InactiveOpacity:
As a temporary workaround, this can be set through the options in the OnKendoWidgetInitializing event:
<script>
function OnKendoWidgetInitializing(sender, args) {
var series = args.series[0]
series.highlight = series.highlight || {};
series.highlight.inactiveOpacity = 0.2
}
</script>
<telerik:RadHtmlChart ID="RadHtmlChart5" runat="server" BorderColor="Fuchsia" BorderStyle="Solid" BorderWidth="1px">
<ClientEvents OnKendoWidgetInitializing="OnKendoWidgetInitializing" />
<PlotArea>
<Series>
<telerik:PieSeries StartAngle="90">
<%-- This is how it should be configured after the feature request --%>
<%--<HighlightAppearance InactiveOpacity="0.2" />--%>
<SeriesItems>
<telerik:PieSeriesItem Name="Slice1" Y="60"></telerik:PieSeriesItem>
<telerik:PieSeriesItem Name="Slice2" Y="40"></telerik:PieSeriesItem>
</SeriesItems>
</telerik:PieSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
Problem appers with x-axis if you try to zoom.
Chart without zoom: https://drive.google.com/file/d/1Nem_NctJN5WtzypS8JgZTtIuAARGFQbd/view?usp=sharing
Chart with some zoom: https://drive.google.com/file/d/1TRJZX3FI52YXyuWgB_kpkMTWWXKecVC_/view?usp=sharing
Project included.
My objective is to compare product revenue over time. This I would like to achieve using data binding. I do not have information of product names or have the product names as columns. My data table structure is having three columns: Date Product Name Revenue This I should simply be able to achieve using data binding to a table with above three columns. In result I expect each of the Product Names to appear as independent series with revenues plotted on different dates. A similar graph is displayed in the Line Chart documentation for RadHtmlChart. https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/chart-types/line-chart
The contrast between the colors for the background and the text in the Tooltip of the Chart series is very low (dark background and black text). https://www.screencast.com/t/fhx6937j The problem is most obvious in the Outlook, Simple, Web20 and Sunset skins. Workaround would be setting the Color property for the ToolTipAppearance to White
Code that reproduces the issue: <telerik:RadHtmlChart runat="server" ID="RadHtmlChartColumnGender" Transitions="true" Width="150" Height="300"> <PlotArea> <Series> <telerik:ColumnSeries Name="Male" Stacked="true" StackType="Stack100"> <SeriesItems> <telerik:CategorySeriesItem Y="69" /> </SeriesItems> </telerik:ColumnSeries> <telerik:ColumnSeries Name="Female" Stacked="true" StackType="Stack100"> <SeriesItems> <telerik:CategorySeriesItem Y="3" /> </SeriesItems> </telerik:ColumnSeries> </Series> <YAxis NarrowRange="false"></YAxis> </PlotArea> </telerik:RadHtmlChart> Workaround: <script> function pageLoad() { var kendoChart = $find("RadHtmlChartColumnGender").get_kendoWidget(); var valueAxis = kendoChart.options.valueAxis; valueAxis.narrowRange = false; $find("RadHtmlChartColumnGender").setOptions({valueAxis: valueAxis}); } </script>
If you set in code behind CharTitle with simple Quote like RadChart1.ChartTitle.Text = "Présences sur l'année sélectionnée"; you obtain a blank space chart (nothing display) you have to set for running RadChart1.ChartTitle.Text = "Présences sur l'année sélectionnée";
When you configure RadHtmlChart's YAxis with NarrowRange set to true, the setting is not serialized and as a result, not applied. You can avoid it by setting the narrowRange on the client-side: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="250px" Height="300px"> <ClientEvents OnLoad="chartLoad" /> ... </telerik:RadHtmlChart> <script> function chartLoad(){ var chart = $telerik.$("#RadHtmlChart1").data("kendoChart"); chart.options.valueAxis.narrowRange = true; } </script>
<script> function chartLoad() { $find("RadHtmlChart2").get_kendoWidget().setOptions({ legend: { position: "top", width: 162, height: 88, orientation: "vertical" } }) } </script> <telerik:RadHtmlChart ID="RadHtmlChart2" runat="server" Width="350" Height="350"> <ClientEvents OnLoad="chartLoad" /> ... </telerik:RadHtmlChart>
Workaround use padding instead of margin: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px"> <PlotArea> <Series> <telerik:ColumnSeries Name="Product 1"> <SeriesItems> <telerik:CategorySeriesItem Y="15000" /> <telerik:CategorySeriesItem Y="-4000" /> <telerik:CategorySeriesItem Y="10000" /> </SeriesItems> </telerik:ColumnSeries> </Series> <XAxis> <LabelsAppearance RotationAngle="45"> <TextStyle Padding="135 0 0 0" /> </LabelsAppearance> <Items> <telerik:AxisItem LabelText="item1" /> <telerik:AxisItem LabelText="item2" /> <telerik:AxisItem LabelText="item3" /> </Items> </XAxis> </PlotArea> </telerik:RadHtmlChart>
I would like to request a new feature in legend of RadHtmlChart that provide a tool-tip for long names because when I add a long text in legends the size of pie-chart is reduced. Sample code for what I expect to be working : <telerik:RadHtmlChart runat="server" ID="Chart" Height="400px" Width="400px"> <ClientEvents OnLoad="onChartLoad" /> function onChartLoad() { var chart = $find("Chart"); var widget = chart.get_kendoWidget(); widget.options.legend.tooltip = "#: dataItem.columnname #" //Feature Request in this line widget.redraw(); }
Hi! I don't know if could be a other type for the html chart control. I want a donut with only 2 series like a points in a exam for example 100/120 and the points 100 shows in the center of the donut, maybe I would like to change the 100 points with a image
For the time being the following events can be handled through the chartObject. Select event is fired when the range of the selector from the navigator pane is changed. JavaScript: <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script> function pageLoad() { var chart = $find('<%=RadHtmlChart1.ClientID%>'); chart._chartObject.bind("selectEnd", OnSelectEnd); } function OnSelectEnd(e) { alert("OnSelectEnd triggered: \nFrom: " + e.from + "\n To: " + e.to); } </script> </telerik:RadCodeBlock> ASPX: <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Layout="Stock" Width="800" Height="400" Transitions="true"> <PlotArea> <XAxis Name="mainAxis" DataLabelsField="SellDate" Type="Date"> </XAxis> <Series> <telerik:ColumnSeries DataFieldY="SellQuantity"> </telerik:ColumnSeries> </Series> </PlotArea> <Navigator Visible="true"> <XAxis Name="navAxis"></XAxis> <SelectionHint Visible="true" /> <Series> <telerik:AreaSeries DataFieldY="SellQuantity"> </telerik:AreaSeries> </Series> </Navigator> </telerik:RadHtmlChart> C#: protected void Page_Load(object sender, EventArgs e) { RadHtmlChart1.DataSource = GetData(); RadHtmlChart1.DataBind(); } protected DataTable GetData() { DataTable dt = new DataTable(); dt.Columns.Add("ID", typeof(int)); dt.Columns.Add("SellQuantity", typeof(int)); dt.Columns.Add("SellDate", typeof(DateTime)); dt.Rows.Add(1, 2, new DateTime(2011, 06, 12)); dt.Rows.Add(1, 5, new DateTime(2011, 12, 12)); dt.Rows.Add(2, 6, new DateTime(2012, 06, 17)); dt.Rows.Add(3, 4, new DateTime(2012, 09, 18)); dt.Rows.Add(4, 7, new DateTime(2013, 03, 18)); return dt; }
For the time being you can use the following JavaScript workaround: <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="300"> <PlotArea> <Series> <telerik:LineSeries Name="series 1"> <SeriesItems> <telerik:CategorySeriesItem Y="30" /> <telerik:CategorySeriesItem Y="10" /> <telerik:CategorySeriesItem Y="25" /> <telerik:CategorySeriesItem Y="20" /> </SeriesItems> </telerik:LineSeries> </Series> <XAxis MinValue="1"> </XAxis> </PlotArea> </telerik:RadHtmlChart> <script> //JavaScript workaround function isNumber(val) { return typeof val === "number" && !isNaN(val); } var dataviz = kendo.dataviz, inArray = dataviz.inArray, deepExtend = kendo.deepExtend, math = Math, AREA = "area", VERTICAL_AREA = "verticalArea", VERTICAL_LINE = "verticalLine", LINE = "line"; kendo.dataviz.CategoricalPlotArea.fn.filterSeries = function (currentSeries, categoryAxis) { var range = categoryAxis.totalRangeIndices(); var justified = categoryAxis.options.justified; var outOfRangePoints = inArray(currentSeries.type, [LINE, VERTICAL_LINE, AREA, VERTICAL_AREA]); var categoryIx; range.min = isNumber(categoryAxis.options.min) ? math.floor(range.min) : 0; range.max = isNumber(categoryAxis.options.max) ? (justified ? math.floor(range.max) + 1 : math.ceil(range.max)) : currentSeries.data.length; currentSeries = deepExtend({}, currentSeries); if (outOfRangePoints) { var minCategory = range.min - 1; var srcCategories = categoryAxis.options.srcCategories || []; if (minCategory >= 0 && minCategory < currentSeries.data.length) { categoryIx = minCategory; currentSeries._outOfRangeMinPoint = { item: currentSeries.data[categoryIx], category: srcCategories[categoryIx], categoryIx: -1 }; } if (range.max < currentSeries.data.length) { categoryIx = range.max; currentSeries._outOfRangeMaxPoint = { item: currentSeries.data[categoryIx], category: srcCategories[categoryIx], categoryIx: range.max - range.min }; } } categoryAxis._seriesMax = math.max(categoryAxis._seriesMax || 0, currentSeries.data.length); currentSeries.data = (currentSeries.data || []).slice(range.min, range.max); return currentSeries; } </script>
A good improvement in the RadHtmlChart would be to add MaxSize and MinSize properties for the series, which would allow the control the scaling of the bubble chart item. The property can be set through the chartObject: <script> function pageLoad() { var chart = $find("<%=BubbleChart.ClientID%>"); chart.get_kendoWidget().options.series[0].minSize = 1; chart.get_kendoWidget().options.series[0].maxSize = 10; chart.get_kendoWidget().redraw(); } </script> ASPX: <telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400"> <PlotArea> <Series> <telerik:BubbleSeries> <Appearance FillStyle-BackgroundColor="#6ab2c9"> </Appearance> <SeriesItems> <telerik:BubbleSeriesItem Size="1" X="5" Y="5500" /> <telerik:BubbleSeriesItem Size="5" X="14" Y="12200" /> <telerik:BubbleSeriesItem Size="15" X="20" Y="39000" /> </SeriesItems> </telerik:BubbleSeries> </Series> </PlotArea> </telerik:RadHtmlChart> More detailed information regarding these properties can be found in the API reference of the Kendo UI Chart here: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.maxSize