Visualization

Cuándo usar pie

Pie es la elección correcta para composición part-of-whole cuando el número de slices es chico (típicamente ≤ 6) y el peso proporcional importa. Usá la variante donut cuando querés liberar el centro del chart para un label interior o un KPI relacionado; usá la variante rose para una encoding alternativa donde el ángulo del slice es fijo pero el radio refleja el valor.

Usá bar con chart.stack: percent en su lugar cuando las categorías son muchas, o cuando querés comparar composición entre múltiples grupos. Usá grid cuando la audiencia necesita los porcentajes reales en forma tabular.

Mapping

mapping.x — requerido. Field string usado como nombre de slice y label de legend.
mapping.y — requerido. Field numérico que maneja el ángulo del slice.

mapping:
  x: status
  y: order_count

Los colores de slice vienen de la paleta de la plataforma en orden de query. Para controlar el orden, ordená en la query Malloy subyacente.

Shortcuts de chart

El bloque chart es tipado y cerrado.

chart.variant — "pie" (default), "donut", o "rose". Donut agrega un radio interno (centro libre); rose cambia a un layout rose-area donde el ángulo del slice es uniforme y el radio codifica el valor.
chart.inner_radius — número (pixels) o string (ej. "55%"). Usar con variant: donut; cuanto mayor el radio interno, más fino el anillo del donut.
chart.outer_radius — número o string.
chart.slice_border_radius — pixels. Esquinas redondeadas en slices para un look más suave.
chart.show_value_labels — boolean. Prende los labels de slice. Estilizalos con chart.label abajo.
chart.cross_filter — boolean, default true.
chart.height — altura en pixels del container de la viz.

Campos pass-through (1:1 con el chart subyacente):

chart.center — centro del pie. Array [x, y] de strings de porcentaje (ej. ["50%", "50%"]) o números de pixels.
chart.start_angle — grados. Default 90.
chart.min_angle — grados. Ángulo mínimo para que slices chiquitos sigan visibles.
chart.rose_type — cuando se usa un layout rose: "radius" o "area".

Labels de slice

chart.label es un objeto que estiliza labels de slice cuando chart.show_value_labels está prendido:

position — "inside", "outside", "top", "bottom", "left", "right", más las variantes "insideLeft" / "insideRight".
rotate — grados, entre -90 y 90.
color, font_size, font_weight.
formatter — template string. Usá {b} para el nombre del slice, {c} para el valor, {d} para el porcentaje.
distance, align, vertical_align, clip.

chart:
  show_value_labels: true
  label:
    position: outside
    formatter: "{b}: {d}%"

Legend & tooltip

chart.legend controla la legend; chart.tooltip controla el tooltip hover. Los dos comparten el mismo shape que en bar — mirá esa página para la referencia completa del sub-bloque.

Tip específico de pie: para una variante donut con la legend a la derecha, seteá center: ["42%", "50%"] para empujar el donut hacia la izquierda y que la legend tenga más espacio.

format

format.y o format[<value_field_name>] — pattern para valores de tooltip de slice y labels dentro de slice.
format en root — fallback.

Comportamiento de cross-filter

Clickear un slice cross-filtra el resto del dashboard por el label del slice.
El field clickeado (el field del label del slice, ej. status) tiene que estar declarado como parámetro en al menos un model usado por el dashboard, o el click se ignora silenciosamente.
Deshabilitá por viz con chart.cross_filter: false.

Mirá Cross-filtering para el mecanismo completo.

Ejemplos trabajados

Donut con labels afuera y legend abajo:

id: ec_orders_by_status_pie
title: Orders by Status
query: "models/ec_revenue.malloy::by_status"
type: pie
mapping:
  label: status
  value: order_count
chart:
  variant: donut
  inner_radius: "55%"
  outer_radius: "78%"
  show_value_labels: true
  label:
    position: outside
    formatter: "{b}: {d}%"
  legend:
    show: true
    position: bottom
format:
  order_count: "#,##0"
published: true

Pie sólida con labels adentro:

type: pie
mapping:
  label: category
  value: revenue
chart:
  show_value_labels: true
  label:
    position: inside
    color: "#fff"
    font_weight: bold
  legend:
    show: false
format:
  revenue: "$#,##0"

Layout rose (ángulo de slice uniforme, radio codifica valor):

chart:
  variant: rose
  rose_type: area
  start_angle: 0
  show_value_labels: true

Errores comunes

Demasiados slices. Un pie con más de ~6 slices se vuelve difícil de leer. Ordená + limitá en la query Malloy, o agregá slices chiquitos en un bucket "Other".
Slices con valores cero o cercanos a cero desaparecen. Usá chart.min_angle para forzar un ángulo visible mínimo, o filtrá ceros en la query.
Los labels se solapan en un chart apretado. Movelos adentro (chart.label.position: "inside") o rotalos.
El contenido interior del donut choca con los labels. Cuando ponés un KPI en el centro del donut vía layout de dashboard, seteá chart.label.position: "outside" así los labels de slice no chocan.
Los colores de slice no son los que esperabas. Los colores se asignan en orden del resultado de query desde la paleta de la plataforma. Ordená la query así el slice más grande o más importante recibe el color dominante.
Los clicks de cross-filter no tienen efecto. El field del label del slice tiene que estar declarado como parámetro en al menos un model usado por el dashboard.

Visualization — pie