# Wijmo_Angular2_Chart.Wjflexpiedatalabel ## Content

WjFlexPieDataLabel Class

Angular 2 component for the wijmo.chart.PieDataLabel class.

The wj-flex-pie-data-label component must be contained in a wijmo.angular2.chart.WjFlexPie component.

Use the wj-flex-pie-data-label component to add PieDataLabel controls to your Angular 2 applications. For details about Angular 2 markup syntax, see Angular 2 Markup.

The WjFlexPieDataLabel component is derived from the PieDataLabel class and inherits all its properties, events and methods.

Heirarchy

Properties

Methods

Events

Properties

border

border: boolean

Gets or sets a value indicating whether the data labels have borders.

connectingLine

connectingLine: boolean

Gets or sets a value indicating whether to draw lines that connect labels to the data points.

content

content: any

Gets or sets the content of data labels.

The content can be specified as a string or as a function that takes HitTestInfo object as a parameter.

When the label content is a string, it can contain any of the following parameters:

  • seriesName: Name of the series that contains the data point (FlexChart only).
  • pointIndex: Index of the data point.
  • value: Value of the data point.
  • x: x-value of the data point (FlexChart only).
  • y: y-value of the data point (FlexChart only).
  • name: Name of the data point.
  • propertyName: any property of data object.

The parameter must be enclosed in curly brackets, for example 'x={x}, y={y}'.

In the following example, we show the y value of the data point in the labels.

 // Create a chart and show y data in labels positioned above the data point.
 var chart = new FlexChart('#theChart');
 chart.initialize({
     itemsSource: data,
     bindingX: 'country',
     series: [
         { name: 'Sales', binding: 'sales' },
         { name: 'Expenses', binding: 'expenses' },
         { name: 'Downloads', binding: 'downloads' }],
 });
 chart.dataLabel.position = "Top";
 chart.dataLabel.content = "{country} {seriesName}:{y}";

The next example shows how to set data label content using a function.

 // Set the data label content
 chart.dataLabel.content = function (ht) {
   return ht.name + ":" + ht.value.toFixed();
 }

initialized

initialized: EventEmitter<any>

This event is triggered after the component has been initialized by Angular, that is all bound properties have been assigned and child components (if any) have been initialized.

isInitialized

isInitialized: boolean

Indicates whether the component has been initialized by Angular. Changes its value from false to true right before triggering the initialized event.

offset

offset: number

Gets or sets the offset from label to the data point.

position

position: PieLabelPosition

Gets or sets the position of the data labels.

renderingNg

renderingNg: EventEmitter<any>

Angular (EventEmitter) version of the Wijmo rendering event for programmatic access. Use this event name if you want to subscribe to the Angular version of the event in code. In template bindings use the conventional rendering Wijmo event name.

wjProperty

wjProperty: string

Gets or sets a name of a property that this component is assigned to. Default value is 'dataLabel'.

Methods

created

  • created(): void

  • If you create a custom component inherited from a Wijmo component, you can override this method and perform necessary initializations that you usually do in a class constructor. This method is called in the last line of a Wijmo component constructor and allows you to not declare your custom component's constructor at all, thus preventing you from a necessity to maintain constructor parameters and keep them in synch with Wijmo component's constructor parameters.

    Returns void

onRendering

Events

rendering

rendering: Event<DataLabel, DataLabelRenderEventArgs>

Occurs before the data label is rendered.