RoseLabels

• Name: Rose Labels

• Description: Suitable for use with Rose, 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<RoseLabelsParams>

• Fields:

  Name	Description	Type
  outerRadius	Drawing function	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
  labelFn	Function to display label text	(d: ComputedDatumSeries) => string
  labelColorType	Label color type	ColorType
  arcScaleType	Mapping method for calculating arc area using value	'area' | 'radius'

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.95,
  labelCentroid: 2.1,
  labelFn: d => String(d.label),
  labelColorType: 'primary',
  arcScaleType: 'area'
}