DevExtreme jQuery - Configure a UI Component

The following code example shows how to declare a UI component configuration object using TypeScript.

window.onload = () => {
    var properties: DevExpress.viz.charts.dxChartOptions;
    options = {
        dataSource: [
            { fruit: 'Oranges', total: 10 },
            { fruit: 'Apples', total: 15 },
            { fruit: 'Bananas', total: 9 }
        ],
        series: { argumentField: 'fruit', valueField: 'total' }
    };  
};

Any configuration object should have a specific type. In this example, the options object has the dxChartOptions type, which configures the Chart UI component. Type names are formed by concatenating the UI component name (in this example, dxChart) and Options.

The part that preceeds the type is its namespace. DevExtreme UI components are declared in the following namespaces.

After you have declared a configuration object, pass it to the jQuery plugin.

$("#chartContainer").dxChart(options);
See Also