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.
DevExpress.viz.charts
- dxChart, dxPieChart and dxPolarChartDevExpress.viz.treeMap
- dxTreeMapDevExpress.viz.gauges
- dxCircularGauge, dxLinearGauge and dxBarGaugeDevExpress.viz.rangeSelector
- dxRangeSelectorDevExpress.viz.sparklines
- dxSparkline and dxBulletDevExpress.viz.map
- dxVectorMapDevExpress.ui
- all other UI components
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);
HTML
<div data-bind="dxChart: chartOptions"></div>
... or AngularJS directive.
function Controller($scope) { $scope.chartOptions = options; }
HTML
<div ng-controller="Controller"> <div dx-chart="chartOptions"></div> </div>
NOTE
TypeScript is only for declaring a UI component configuration. You still need to use jQuery, Knockout or AngularJS to apply this configuration.
See Also
- API Reference.WidgetName.Configuration, for example, API Reference.Chart.Configuration
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.