# wijmo.vue2.chart Module ## Content

wijmo.vue2.chart Module

Contains Vue 2 and 3 components for the wijmo.chart module.

Variables

Variables

WjFlexChart

WjFlexChart: any

Vue component for the wijmo.chart.FlexChart control.

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.

WjFlexChartAxis

WjFlexChartAxis: any

Vue component for the wijmo.chart.Axis class.

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.

WjFlexChartDataLabel

WjFlexChartDataLabel: any

Vue component for the wijmo.chart.DataLabel class.

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.

WjFlexChartDataPoint

WjFlexChartDataPoint: any

Vue component for the wijmo.chart.DataPoint class.

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.

WjFlexChartLegend

WjFlexChartLegend: any

Vue component for the wijmo.chart.Legend class.

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.

WjFlexChartLineMarker

WjFlexChartLineMarker: any

Vue component for the wijmo.chart.LineMarker class.

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.

WjFlexChartPlotArea

WjFlexChartPlotArea: any

Vue component for the wijmo.chart.PlotArea class.

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.

WjFlexChartSeries

WjFlexChartSeries: any

Vue component for the wijmo.chart.Series class.

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.

WjFlexPie

WjFlexPie: any

Vue component for the wijmo.chart.FlexPie control.

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.

WjFlexPieDataLabel

WjFlexPieDataLabel: any

Vue component for the wijmo.chart.PieDataLabel class.

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.