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. Usa la variante donut cuando quieres liberar el centro del chart para un label interior o un KPI relacionado; usa la variante rose para una encoding alternativa donde el ángulo del slice es fijo pero el radio refleja el valor.

Usa bar con chart.stack: percent en su lugar cuando las categorías son muchas, o cuando quieres comparar composición entre múltiples grupos. Usa 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, ordena 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. Usa {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 — mira 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, setea 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 la categoría del slice (el field mapping.x).
El field clickeado (el field mapping.x, ej. status) tiene que estar declarado como parámetro en una firma de source del archivo de model propio de esta viz, o el click se ignora silenciosamente.
Deshabilita por viz con chart.cross_filter: false.

Mira Cross-filtering para el mecanismo completo.

Ejemplos trabajados

Donut con labels afuera y legend abajo — nota min_angle manteniendo visibles los slices chiquitos y center empujando el donut hacia arriba para hacer espacio a la legend:

id: ec_revenue_share_by_category_pie
title: Revenue share by category
query: "models/ec_revenue_share.malloy::revenue_share_by_category"
type: pie
mapping:
  x: category
  y: revenue
chart:
  variant: donut
  height: 480
  inner_radius: "52%"
  outer_radius: "80%"
  slice_border_radius: 4
  min_angle: 4
  show_value_labels: true
  label:
    position: outside
    formatter: "{b}: {d}%"
  center: ["50%", "48%"]
  legend:
    show: true
    position: bottom
    orient: horizontal
    item_gap: 14
  tooltip:
    trigger: item
format:
  revenue: "$#,##0a"
published: true

Pie sólida con labels adentro:

type: pie
mapping:
  x: category
  y: 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

Notas de diseño

Mantenlo en unos seis slices — ordena y limita en la query Malloy, o agrega los slices chicos en un bucket "Other".
chart.min_angle mantiene visibles los slices cercanos a cero; alternativamente filtra los ceros en la query.
En charts apretados, pon los labels adentro (chart.label.position: "inside") o rotalos.
Para un donut con contenido en el centro, setea chart.label.position: "outside" para que los labels de slice queden despejados.
Los colores siguen el orden del resultado de la query desde la paleta de la plataforma — ordena la query para que el slice más grande o más importante tome el color dominante.

Visualization — pie