PieLabels

• Name: Pie Labels

• Description: Suitable for use with Pie, displays data labels

• Usage: The data in data$ must have a label field to display the label text

Example:

chart.data$.next([
  [
    {
      label: 'Taipei',
      value: 50000
    },
    {
      label: 'Taichung',
      value: 40000
    },
    {
      label: 'Kaohsiung',
      value: 30000
    }
  ]
])

• Playground Example

params$

• Type: Partial<PieLabelsParams>

• Fields:

  Name	Description	Type
  outerRadius	Drawing function	number
  outerRadiusWhileHighlight	Text (line) attribute	number
  startAngle	Starting angle of the arc	number
  endAngle	Ending angle of the arc	number
  labelCentroid	Relative position of the label at the center of the arc radius (0 is the center of the circle, 2 is the edge of the circle)	number
  labelColorType	Label color type	ColorType
  labelFn	Function to display label text	(d: ComputedDatumSeries) => string

Detailed Types

type ColorType = 'none' | 'label' | 'labelContrast' | 'primary' | 'secondary' | 'background'

interface ComputedDatumSeries {
  id: string
  index: number
  label: string
  visible: boolean
  data: any
  value: number | null
  color: string
  seriesIndex: number
  seriesLabel: string
  seq: number
}

• Default values:

{
  outerRadius: 0.85,
  outerRadiusWhileHighlight: 0.9,
  startAngle: 0,
  endAngle: Math.PI * 2,
  labelCentroid: 2.1,
  labelColorType: 'primary',
  labelFn: d => String(d.label),
}