The wj-flex-chart component may contain the following child components: wijmo.vue2.chart.analytics.WjFlexChartTrendLine , wijmo.vue2.chart.analytics.WjFlexChartMovingAverage , wijmo.vue2.chart.analytics.WjFlexChartYFunctionSeries , wijmo.vue2.chart.analytics.WjFlexChartParametricFunctionSeries , wijmo.vue2.chart.analytics.WjFlexChartWaterfall , wijmo.vue2.chart.analytics.WjFlexChartBoxWhisker , wijmo.vue2.chart.analytics.WjFlexChartErrorBar , wijmo.vue2.chart.analytics.WjFlexChartBreakEven , wijmo.vue2.chart.animation.WjFlexChartAnimation , wijmo.vue2.chart.annotation.WjFlexChartAnnotationLayer , wijmo.vue2.chart.interaction.WjFlexChartRangeSelector , wijmo.vue2.chart.interaction.WjFlexChartGestures , wijmo.vue2.chart.WjFlexChartAxis , wijmo.vue2.chart.WjFlexChartLegend , wijmo.vue2.chart.WjFlexChartDataLabel , wijmo.vue2.chart.WjFlexChartSeries , wijmo.vue2.chart.WjFlexChartLineMarker and wijmo.vue2.chart.WjFlexChartPlotArea.

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 markup. 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 using Vue markup:

<wj-flex-chart
    :items-source="data"
    binding-x="country"
    :header="props.header"
    :footer="props.footer">

    <wj-flex-chart-legend :position="props.legendPosition">
    </wj-flex-chart-legend>
    <wj-flex-chart-axis wj-property="axisX" :title="props.titleX">
    </wj-flex-chart-axis>
    <wj-flex-chart-axis wj-property="axisY" :title="props.titleY">
    </wj-flex-chart-axis>

    <wj-flex-chart-series name="Sales" binding="sales">
    </wj-flex-chart-series>
    <wj-flex-chart-series name="Expenses" binding="expenses">
    </wj-flex-chart-series>
    <wj-flex-chart-series name="Downloads" binding="downloads">
    </wj-flex-chart-series>
</wj-flex-chart>

The code sets the itemsSource property to a collection that contains the chart data and the bindingX property to the data property that contains the chart X values. It also sets the chart's header and footer properties to define titles to show above and below the chart.

The wj-flex-chart-legend and wj-flex-chart-axis components are used to customize the chart's legend and axes.

Finally, three wj-flex-chart-series components are used to specify the data properties to be shown on the chart.

The wj-flex-chart-axis component should be contained in one of the following components: wijmo.vue2.chart.WjFlexChart , wijmo.vue2.chart.WjFlexChartSeries , wijmo.vue2.chart.finance.WjFinancialChart or wijmo.vue2.chart.finance.WjFinancialChartSeries.

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 markup. The signature of the handler function is the same as any other Wijmo event handlers.

The wj-flex-chart-data-label component should be contained in a wijmo.vue2.chart.WjFlexChart 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 markup. The signature of the handler function is the same as any other Wijmo event handlers.

The wj-flex-chart-data-point component should be contained in one of the following components: wijmo.vue2.chart.annotation.WjFlexChartAnnotationText , wijmo.vue2.chart.annotation.WjFlexChartAnnotationEllipse , wijmo.vue2.chart.annotation.WjFlexChartAnnotationRectangle , wijmo.vue2.chart.annotation.WjFlexChartAnnotationLine , wijmo.vue2.chart.annotation.WjFlexChartAnnotationPolygon , wijmo.vue2.chart.annotation.WjFlexChartAnnotationCircle , wijmo.vue2.chart.annotation.WjFlexChartAnnotationSquare or wijmo.vue2.chart.annotation.WjFlexChartAnnotationImage.

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 markup. The signature of the handler function is the same as any other Wijmo event handlers.

The wj-flex-chart-legend component should be contained in one of the following components: wijmo.vue2.chart.WjFlexChart , wijmo.vue2.chart.WjFlexPie , wijmo.vue2.chart.finance.WjFinancialChart , wijmo.vue2.chart.radar.WjFlexRadar , wijmo.vue2.chart.hierarchical.WjSunburst or wijmo.vue2.chart.map.WjFlexMap.

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 markup. The signature of the handler function is the same as any other Wijmo event handlers.

The wj-flex-chart-line-marker component should be contained in one of the following components: wijmo.vue2.chart.WjFlexChart or wijmo.vue2.chart.finance.WjFinancialChart.

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 markup. The signature of the handler function is the same as any other Wijmo event handlers.

The wj-flex-chart-plot-area component should be contained in one of the following components: wijmo.vue2.chart.WjFlexChart or wijmo.vue2.chart.finance.WjFinancialChart.

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 markup. The signature of the handler function is the same as any other Wijmo event handlers.

The wj-flex-chart-series component should be contained in a wijmo.vue2.chart.WjFlexChart component.

The wj-flex-chart-series component may contain a wijmo.vue2.chart.WjFlexChartAxis 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 markup. The signature of the handler function is the same as any other Wijmo event handlers.

The wj-flex-pie component may contain the following child components: wijmo.vue2.chart.animation.WjFlexChartAnimation , wijmo.vue2.chart.WjFlexChartLegend and wijmo.vue2.chart.WjFlexPieDataLabel.

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 markup. The signature of the handler function is the same as any other Wijmo event handlers.

The wj-flex-pie-data-label component should be contained in a wijmo.vue2.chart.WjFlexPie 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 markup. The signature of the handler function is the same as any other Wijmo event handlers.