Configuration size

Specifies the size of the widget in pixels.

Type: Object

The widget occupies the entire area of the parent container (division). If the container size (width or height) is set to zero, the widget is not displayed.

If you need to set a particular size for the widget, different from the container's size, use the size configuration object. Assign a height and width in pixels to height and width properties.

Show Example:

In this example, the size of the chart is set smaller than the size of the chart container using the size option.

<div id="pieChartContainer" style="height:400px;max-width:600px;margin: 0px auto"></div>
var dataSource = [
    { continent: 'Africa', population: 1022234000 },
    { continent: 'Antarctica', population: 4490 },
    { continent: 'Asia', population: 4164252000 },
    { continent: 'Australia', population: 29127000 },
    { continent: 'Europe', population: 738199000 },
    { continent: 'North America', population: 542056000 },
    { continent: 'South America', population: 392555000 }

$(function () {
        dataSource: dataSource,
        series: {
            argumentField: 'continent',
            valueField: 'population'
        title: 'Population by Continent',
        size: {
            height: 300,
            width: 500


Specifies the height of the chart, in pixels.

Type: Number
Default Value: undefined


Specifies the width of the widget, in pixels.

Type: Number
Default Value: undefined