Use the wj-flex-chart directive to add charts to your AngularJS applications. Note that directive and parameter names must be formatted using lower-case letters with dashes instead of camel case. For example:

<p>Here is a FlexChart control:</p>
<wj-flex-chart
  style="height:300px"
  items-source="data"
  binding-x="country">
  <wj-flex-chart-axis
    wj-property="axisY"
    major-unit="5000">
  </wj-flex-chart-axis>
  <wj-flex-chart-series
    binding="sales"
    name="Sales">
  </wj-flex-chart-series>
  <wj-flex-chart-series
    binding="expenses"
    name="Expenses">
  </wj-flex-chart-series>
  <wj-flex-chart-series
    binding="downloads"
    name="Downloads"
    chart-type="LineSymbols">
  </wj-flex-chart-series>
</wj-flex-chart>

The example below creates a FlexChart control and binds it to a 'data' array exposed by the controller. The chart has three series objects, each corresponding to a property in the objects contained in the source array. The last series in the example uses the 'chart-type' attribute to override the default chart type used for the other series objects.

Example

The wj-flex-chart directive supports the following attributes:

binding

@ The name of the property that contains Y values for the chart. You can override this at the series level.

binding-x

@ The name of the property that contains X values for the chart. You can override this at the series level.

chart-type

@ The default chart type to use in rendering series objects. You can override this at the series level. See ChartType.

control

= A reference to the FlexChart control that this directive creates.

footer

@ The text to display in the chart footer (plain text).

footer-style

= The style to apply to the chart footer.

header

@ The text to display in the chart header (plain text).

header-style

= The style to apply to the chart header.

initialized

& This event occurs after the binding has finished initializing the control with attribute values.

is-initialized

= A value indicating whether the binding has finished initializing the control with attribute values.

interpolate-nulls

@ The value indicating whether to interpolate or leave gaps when there are null values in the data.

item-formatter

= The formatter function that customizes the appearance of data points.

items-source

= An array or ICollectionView object that contains the data used to create the chart.

legend-toggle

@ The value indicating whether clicking legend items toggles series visibility.

options

= Chart options that only apply to certain chart types. See options under FlexChart for details.

palette

= An array that contains the default colors used for displaying each series.

plot-margin

= The number of pixels of space to leave between the edges of the control and the plot area, or CSS-style margins.

rotated

@ The value indicating whether to flip the axes so that X is vertical and Y is horizontal.

selection

= The series object that is selected.

selection-mode

@ The SelectionMode value indicating whether or what is selected when the user clicks a series.

stacking

@ The Stacking value indicating whether or how series objects are stacked or plotted independently.

symbol-size

@ The size of the symbols used to render data points in Scatter, LineSymbols, and SplineSymbols charts, in pixels. You can override this at the series level.

tooltip-content

@ The value to display in the ChartTooltip content property.

got-focus

& The FlexChart.gotFocus event handler.

lost-focus

& The FlexChart.lostFocus event handler.

rendering

& The FlexChart.rendering event handler.

rendered

& The FlexChart.rendered event handler.

series-visibility-changed

& The FlexChart.seriesVisibilityChanged event handler.

selection-changed

& The FlexChart.selectionChanged event handler.

The wj-flex-chart directive may contain the following child directives: wijmo.angular.chart.WjFlexChartAxis, wijmo.angular.chart.WjFlexChartSeries, wijmo.angular.chart.WjFlexChartLegend and wijmo.angular.chart.WjFlexChartDataLabel.