# Wijmo_React_Chart ## Content

wijmo.react.chart Module

Contains React components for the wijmo.chart module.

Variables

Variables

Const FlexChart

FlexChart: WjForwardRefExoticComponent<FlexChartProps>

React component for the wijmo.chart.FlexChart control.

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.

Const FlexChartAxis

FlexChartAxis: WjForwardRefExoticComponent<FlexChartAxisProps>

React component for the wijmo.chart.Axis class.

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.

Const FlexChartDataLabel

FlexChartDataLabel: WjForwardRefExoticComponent<FlexChartDataLabelProps>

React component for the wijmo.chart.DataLabel class.

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.

Const FlexChartDataPoint

FlexChartDataPoint: WjForwardRefExoticComponent<FlexChartDataPointProps>

React component for the wijmo.chart.DataPoint class.

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.

Const FlexChartLegend

FlexChartLegend: WjForwardRefExoticComponent<FlexChartLegendProps>

React component for the wijmo.chart.Legend class.

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.

Const FlexChartLineMarker

FlexChartLineMarker: WjForwardRefExoticComponent<FlexChartLineMarkerProps>

React component for the wijmo.chart.LineMarker class.

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.

Const FlexChartPlotArea

FlexChartPlotArea: WjForwardRefExoticComponent<FlexChartPlotAreaProps>

React component for the wijmo.chart.PlotArea class.

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.

Const FlexChartSeries

FlexChartSeries: WjForwardRefExoticComponent<FlexChartSeriesProps>

React component for the wijmo.chart.Series class.

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.

Const FlexPie

FlexPie: WjForwardRefExoticComponent<FlexPieProps>

React component for the wijmo.chart.FlexPie control.

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.

Const FlexPieDataLabel

FlexPieDataLabel: WjForwardRefExoticComponent<FlexPieDataLabelProps>

React component for the wijmo.chart.PieDataLabel class.

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.