Change plotarea margin with Javascript

1 Answer 28 Views
Chart (HTML5)
mathieu
Top achievements
Rank 1
Iron
mathieu asked on 16 May 2022, 01:39 PM | edited on 16 May 2022, 02:27 PM

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

mathieu
Top achievements
Rank 1
Iron
commented 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();
    }
}

1 Answer, 1 is accepted

Sort by
0
mathieu
Top achievements
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();
    }
}
 
Tags
Chart (HTML5)
Asked by
mathieu
Top achievements
Rank 1
Iron
Answers by
mathieu
Top achievements
Rank 1
Iron
Share this question
or