getPaddings();
The getPaddings method returns an object that contains chart paddings.
The method returns an object that contains the following fields:
Bottom. Bottom padding of the chart.
Left. Left padding of the chart.
Right. Right padding of the chart.
Top. Top padding of the chart..
Fields of the returned object are of the Number type.
Padding values are set using the following properties:
Chart.PaddingBottom. The PaddingBottom property determines bottom padding of the chart.
Chart.PaddingLeft. The PaddingLeft property determines left padding of the chart.
Chart.PaddingRight. The PaddingRight property determines right padding of the chart.
Chart.PaddingTop. The PaddingTop property determines top padding of the chart.
Executing the example requires that the HTML page contains the Chart component named chart (see Example of Creating a Histogram). Get information on chart size and paddings:
// Get object that contains chart size and paddings accounting for only size and paddings of the DOM element
var borders = chart.getOriginalPlotBorders();
// Show information about the chart to the browser console
console.log("Coordinates of the top left corner of the chart: (" + borders.X + ";" + borders.Y + ")");
console.log("Chart width: " + borders.W);
console.log("Chart height: " + borders.H);
// Get object that contains chart paddings
var paddings = chart.getPaddings();
// Get object that contains information on whether chart paddings are applied
var paddingWasApplied = chart.getPaddingWasApplied();
// Show information about chart paddings to the browser console
var leftWasApplied = paddingWasApplied.Left ? "yes" : "no";
var rightWasApplied = paddingWasApplied.Right ? "yes" : "no";
var topWasApplied = paddingWasApplied.Top ? "yes" : "no";
var bottomWasApplied = paddingWasApplied.Bottom ? "yes" : "no";
console.log("Left padding: " + paddings.Left + " Applied in the chart? " + leftWasApplied);
console.log("Right padding: " + paddings.Right + " Applied in the chart? " + rightWasApplied);
console.log("Top padding: " + paddings.Top + " Applied in the chart? " + topWasApplied);
console.log("Bottom padding: " + paddings.Bottom + " Applied in the chart? " + bottomWasApplied);
After executing the example the browser console displays chart size, coordinates of the top left corner of the chart, as well as values of chart paddings and confirmations of paddings usage in the chart:
Coordinates of the top left corner of the chart: (77.4609375;54)
Chart width: 502.5390625 VM2536:6
Chart height: 318
Left padding: 15 Applied in the chart? yes
Right padding: 20 Applied in the chart? yes
Top padding: 30 Applied in the chart? yes
Bottom padding: 40 Applied in the chart? yes
Set alternative method of padding calculation, redraw the chart and show in the browser console if the paddings are applied:
// Specify that alternative method of chart paddings calculation is used
chart.setUseSoftPadding(true);
console.log("Use alternative method of chart paddings calculation");
// Redraw the chart
chart.redraw(true);
// Get again the object that contains information about applied chart paddings
paddingWasApplied = chart.getPaddingWasApplied();
// In the browser console show information about chart paddings after alternative method of paddings calculation was applied
leftWasApplied = paddingWasApplied.Left ? "yes" : "no";
rightWasApplied = paddingWasApplied.Right ? "yes" : "no";
topWasApplied = paddingWasApplied.Top ? "yes" : "no";
bottomWasApplied = paddingWasApplied.Bottom ? "yes" : "no";
console.log("Is the left padding applied in the chart? " + leftWasApplied);
console.log("Is the right padding applied in the chart? " + rightWasApplied);
console.log("Is the top padding applied in the chart? " + topWasApplied);
console.log("Is the bottom padding applied in the chart? " + bottomWasApplied);
After executing the example the chart is redrawn without applying the left, top and bottom paddings:
The browser console shows a message informing that alternative padding calculation is applied, followed by refreshed information about applied chart paddings:
Alternative calculation of chart paddings is applied
Is the left padding applied in the chart? no
Is the right padding applied in the chart? yes
Is the top padding applied in the chart? no
Is the bottom padding applied in the chart? no
See also: