FlexChart Class

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.