The flex-chart component may contain the following child components: wijmo.react.chart.analytics.FlexChartTrendLine , wijmo.react.chart.analytics.FlexChartMovingAverage , wijmo.react.chart.analytics.FlexChartYFunctionSeries , wijmo.react.chart.analytics.FlexChartParametricFunctionSeries , wijmo.react.chart.analytics.FlexChartWaterfall , wijmo.react.chart.analytics.FlexChartBoxWhisker , wijmo.react.chart.analytics.FlexChartErrorBar , wijmo.react.chart.analytics.FlexChartBreakEven , wijmo.react.chart.animation.FlexChartAnimation , wijmo.react.chart.annotation.FlexChartAnnotationLayer , wijmo.react.chart.interaction.FlexChartRangeSelector , wijmo.react.chart.interaction.FlexChartGestures , wijmo.react.chart.FlexChartAxis , wijmo.react.chart.FlexChartLegend , wijmo.react.chart.FlexChartDataLabel , wijmo.react.chart.FlexChartSeries , wijmo.react.chart.FlexChartLineMarker and wijmo.react.chart.FlexChartPlotArea.

The component supports all properties and events of the pure JavaScript wijmo.chart.FlexChart control it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.

The example below shows how to instantiate and initialize a wijmo.chart.FlexChart control in JSX:

<Wj.FlexChart
  itemsSource={ this.state.data }
  bindingX="name"
  header={ this.state.header }
  footer={ this.state.footer }
  axisX={​{ title: this.state.titleX }}
  axisY={​{ title: this.state.titleY }}
  legend={​{ position: this.state.legendPosition }}
  series={[
      { name: 'Sales', binding: 'sales' },
      { name: 'Expenses', binding: 'expenses' },
      { name: 'Downloads', binding: 'downloads', chartType: 'LineSymbols' }
  ]} />

The code sets the itemsSource property to a collection that contains the data to chart and the bindingX property to specify the name of the data property to use for the chart's X values.

It sets the header and footer properties to specify the chart titles, and customizes the chart's axes and legend.

Finally, it sets the series property to an array that specifies the data items that the chart should display.

The flex-chart-axis component should be contained in one of the following components: wijmo.react.chart.FlexChart , wijmo.react.chart.FlexChartSeries , wijmo.react.chart.finance.FinancialChart or wijmo.react.chart.finance.FinancialChartSeries.

The component supports all properties and events of the pure JavaScript wijmo.chart.Axis class it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.

The flex-chart-data-label component should be contained in a wijmo.react.chart.FlexChart component.

The component supports all properties and events of the pure JavaScript wijmo.chart.DataLabel class it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.

The flex-chart-data-point component should be contained in a wijmo.react.chart.annotation.FlexChartAnnotation component.

The component supports all properties and events of the pure JavaScript wijmo.chart.DataPoint class it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.

The flex-chart-legend component should be contained in one of the following components: wijmo.react.chart.FlexChart , wijmo.react.chart.FlexPie , wijmo.react.chart.finance.FinancialChart , wijmo.react.chart.radar.FlexRadar , wijmo.react.chart.hierarchical.Sunburst or wijmo.react.chart.map.FlexMap.

The component supports all properties and events of the pure JavaScript wijmo.chart.Legend class it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.

The flex-chart-line-marker component should be contained in one of the following components: wijmo.react.chart.FlexChart or wijmo.react.chart.finance.FinancialChart.

The component supports all properties and events of the pure JavaScript wijmo.chart.LineMarker class it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.

The flex-chart-plot-area component should be contained in one of the following components: wijmo.react.chart.FlexChart or wijmo.react.chart.finance.FinancialChart.

The component supports all properties and events of the pure JavaScript wijmo.chart.PlotArea class it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.

The flex-chart-series component should be contained in a wijmo.react.chart.FlexChart component.

The flex-chart-series component may contain a wijmo.react.chart.FlexChartAxis child component.

The component supports all properties and events of the pure JavaScript wijmo.chart.Series class it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.

The flex-pie component may contain the following child components: wijmo.react.chart.animation.FlexChartAnimation , wijmo.react.chart.FlexChartLegend and wijmo.react.chart.FlexPieDataLabel.

The component supports all properties and events of the pure JavaScript wijmo.chart.FlexPie control it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.

The flex-pie-data-label component should be contained in a wijmo.react.chart.FlexPie component.

The component supports all properties and events of the pure JavaScript wijmo.chart.PieDataLabel class it represents.

The component includes an initialized event that is raised when the control is initialized after it is added to the page. You can use this event to perform further initialization in addition to setting properties in JSX. The signature of the handler function is the same as any other Wijmo event handlers.