mathieu
Top achievements
Rank 1
Iron
Rank 1
Iron
Hi,
I have a page containing a donut chart. All the design has been made for 2 different screen resolution (1366x768 and 1920x1080).
I'd like to reduce the margin of the chart svg that is rendered.
I found how to do it on the control parameter
<telerik:RadHtmlChart runat="server" ID="DonutResults" Transitions="true" Skin="Material" CssClass="donut-chart">
<ClientEvents OnLoad="chartLoad" />
<PlotArea>
<Appearance>
<TextStyle Margin="-60 -150 -30 -150" />
</Appearance>
</PlotArea>
</telerik:RadHtmlChart>And from server-side
DonutResults.PlotArea.Appearance.TextStyle.Margin = "-60 -150 -30 -150";but I'd like to do it dynamically.
I have already tried several things with no result.
function setChartPadding() {
var chartHTML = $find("<%=DonutResults.ClientID%>");
var chart = chartHTML.get_kendoWidget();
var plotArea = chart.plotArea();
if (window.outerHeight <= 768) {
// resize for "small screen"
}
else {
// first method
//plotArea._plotArea.box.x1 = -145;
//plotArea._plotArea.box.y1 = -55;
//plotArea._plotArea.box.x2 = 515;
//plotArea._plotArea.box.y2 = 395;
// second method
chartHTML.get_kendoWidget({
plotArea: {
margin: {
top: -60,
right: -150,
bottom: -30,
left: -150
}
}
});
chartHTML.repaint();
}
}Any suggestions?
PS: here is how I populate the chart
DonutSeries _serie = new DonutSeries();
_serie.Name = "Results";
_serie.StartAngle = 360;
_serie.HoleSize = 100;
_serie.LabelsAppearance.Visible = false;
_serie.TooltipsAppearance.Visible = false;
_serie.HighlightAppearance.Visible = false;
_serie.SeriesItems.Add(new PieSeriesItem((decimal)Diet, System.Drawing.Color.FromArgb(103, 185, 176)));
_serie.SeriesItems.Add(new PieSeriesItem((decimal)Trip, System.Drawing.Color.FromArgb(33, 156, 220)));
_serie.SeriesItems.Add(new PieSeriesItem((decimal)Home, System.Drawing.Color.FromArgb(00, 68, 138)));
_serie.SeriesItems.Add(new PieSeriesItem((decimal)Lifestyle, System.Drawing.Color.FromArgb(229, 83, 26)));
_serie.SeriesItems.Add(new PieSeriesItem((decimal)PublicService, System.Drawing.Color.FromArgb(206, 20, 49)));
DonutResults.PlotArea.Series.Add(_serie);1 Answer, 1 is accepted
0
mathieu
Top achievements
Rank 1
Iron
Rank 1
Iron
answered on 16 May 2022, 02:37 PM
Found the solution here --> feedback.telerik.
function setChartPadding() {
var chartHTML = $find("<%=DonutResults.ClientID%>");
var chart = chartHTML.get_kendoWidget();
var plotArea = chart.plotArea();
if (window.outerHeight <= 768) {
// resize for "small screen"
}
else {
chartHTML._chartObject.options.plotArea.margin = { top: -60, right: -150, bottom: -30, left: -150 };
chartHTML.repaint();
}
}
Found the solution here --> feedback.telerik.
function setChartPadding() { var chartHTML = $find("<%=DonutResults.ClientID%>"); var chart = chartHTML.get_kendoWidget(); var plotArea = chart.plotArea(); if (window.outerHeight <= 768) { // resize for "small screen" } else { chartHTML._chartObject.options.plotArea.margin = { top: -60, right: -150, bottom: -30, left: -150 }; chartHTML.repaint(); } }