DevExtreme jQuery - Configure a Widget

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

window.onload = () => {
    var options: 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 widget. Type names are formed by concatenating the widget name (in this example, dxChart) and Options.

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

• DevExpress.viz.charts - dxChart, dxPieChart and dxPolarChart
• DevExpress.viz.treeMap - dxTreeMap
• DevExpress.viz.gauges - dxCircularGauge, dxLinearGauge and dxBarGauge
• DevExpress.viz.rangeSelector - dxRangeSelector
• DevExpress.viz.sparklines - dxSparkline and dxBullet
• DevExpress.viz.map - dxVectorMap
• DevExpress.ui - all other widgets

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

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

... Knockout binding ...

var viewModel = {
    chartOptions: options
};

ko.applyBindings(viewModel);

<div data-bind="dxChart: chartOptions"></div>

... or AngularJS directive.

function Controller($scope) {
    $scope.chartOptions = options;
}

<div ng-controller="Controller">
    <div dx-chart="chartOptions"></div>
</div>

See Also

• API Reference.WidgetName.Configuration, for example, API Reference.Chart.Configuration