Ejemplos · Gráfico de barras apiladas

Gráfico de barras apiladas: ejemplos

Las barras apiladas muestran total y composición: cada columna es una suma y cada franja un componente. Los ejemplos muestran también los mismos datos agrupados; puedes cambiar entre ambas vistas en el creador.

Cuándo usarlo

  • Mostrar totales con componentes: ingresos por producto o visitas por fuente
  • Seguir suma y composición durante pocos periodos
  • Representar de dos a cuatro componentes por columna

¿Conviene otra forma?

Las franjas intermedias no comparten base y se comparan peor. Para comparar componentes con precisión, agrupa columnas.

Ejemplos de uso

Visitas por fuente

La suma muestra el crecimiento; las franjas revelan que procede de la búsqueda.

Abrir en el creador con estos datos

Ver especificación 
{
  "type": "stacked",
  "theme": "glass",
  "title": "Visitas por fuente (miles)",
  "source": "Analítica web",
  "data": {
    "labels": [
      "may",
      "jun",
      "jul",
      "ago"
    ],
    "series": [
      {
        "name": "Búsqueda",
        "values": [
          42,
          48,
          55,
          63
        ]
      },
      {
        "name": "Redes sociales",
        "values": [
          18,
          17,
          19,
          18
        ]
      },
      {
        "name": "Directo",
        "values": [
          18,
          14,
          16,
          17
        ]
      }
    ]
  }
}

Los mismos datos, lado a lado

Las columnas agrupadas colocan cada serie sobre cero. Compara así las partes; el apilado destaca los totales.

Abrir en el creador con estos datos

Ver especificación 
{
  "type": "column",
  "theme": "ink",
  "title": "Ingresos por producto, agrupados",
  "source": "Finanzas sin auditar",
  "data": {
    "labels": [
      "T1",
      "T2",
      "T3",
      "T4"
    ],
    "series": [
      {
        "name": "Suscripciones",
        "values": [
          31,
          34,
          38,
          44
        ]
      },
      {
        "name": "Servicios",
        "values": [
          12,
          11,
          14,
          15
        ]
      },
      {
        "name": "Licencias",
        "values": [
          8,
          9,
          7,
          10
        ]
      }
    ]
  }
}

Apilado al 100 %

options.stack: "percent" lleva todas las pilas a altura completa. Compara proporciones; la etiqueta conserva la suma absoluta.

Abrir en el creador con estos datos

Ver especificación 
{
  "type": "stacked",
  "theme": "editorial",
  "title": "Proporción de visitas por fuente",
  "source": "Analítica web por trimestre",
  "options": {
    "stack": "percent"
  },
  "data": {
    "labels": [
      "T1",
      "T2",
      "T3",
      "T4"
    ],
    "series": [
      {
        "name": "Orgánico",
        "values": [
          62,
          74,
          81,
          90
        ]
      },
      {
        "name": "De pago",
        "values": [
          38,
          41,
          34,
          30
        ]
      },
      {
        "name": "Referencia",
        "values": [
          21,
          18,
          25,
          31
        ]
      }
    ]
  }
}
Abrir este gráfico en el creador Empezar con Gráfico de barras

Preguntas frecuentes

¿Apiladas o agrupadas?

Apila si importa el total y agrupa si importa comparar componentes. Todas las columnas agrupadas comparten base; en el apilado solo la primera franja.

¿Cuántas series convienen?

El motor acepta más, pero de dos a cuatro se leen bien. Agrupa categorías pequeñas en «Otros» antes de añadir muchas franjas estrechas.