Configuration size

Specifies the size of the widget in pixels.

Type: Object

By default, the widget occupies the entire area of the parent container. If you need to set a particular size for the widget, different from the container's size, assign a height and width in pixels to height and width properties of the size object.

Using the size object, you can hide the widget. For this purpose, simply assign 0 to both the height and width of the widget.

NOTE: The size configuration object reserves space for the main widget elements, while displaying a tooltip may require extra space. To reserve the area around the widget for the tooltip, you can apply a margin to the widget's container.

Show Example:
jQuery

In this example, the size of the widget differs from the container size.

<div id="sparklineContainer" style="height:50px; max-width:300px; margin: 0 auto;border:1px solid skyblue"></div>
var silverCosts = [
    { month: 1, 2010: 17 }, { month: 2, 2010: 28 },
    { month: 3, 2010: 34 }, { month: 4, 2010: 37 },
    { month: 5, 2010: 47 }, { month: 6, 2010: 37 },
    { month: 7, 2010: 34 }, { month: 8, 2010: 40 },
    { month: 9, 2010: 41 }, { month: 10, 2010: 30 },
    { month: 11, 2010: 34 }, { month: 12, 2010: 32 }
]

$(function () {
    $('#sparklineContainer').dxSparkline({
        dataSource: silverCosts,
        argumentField: 'month',
        valueField: '2010',
        lineColor: 'purple',
        type: 'spline',
        tooltip: { enabled: false },
        size: {
            height: 30,
            width: 200
        }
    });
})

height

Specifies the height of the widget in pixels.

Type: Number
Default Value: undefined

width

Specifies the width of the widget in pixels.

Type: Number
Default Value: undefined