DevExtreme React - 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 dxPolarChartDevExpress.viz.treeMap
- dxTreeMapDevExpress.viz.gauges
- dxCircularGauge, dxLinearGauge and dxBarGaugeDevExpress.viz.rangeSelector
- dxRangeSelectorDevExpress.viz.sparklines
- dxSparkline and dxBulletDevExpress.viz.map
- dxVectorMapDevExpress.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
If you have technical questions, please create a support ticket in the DevExpress Support Center.