How do I create a forest plot chart in JavaScript?

Install with `npm install katucharts.js`, import the module with `import 'katucharts.js/bio';`, then call KatuCharts.chart(container, { chart: { type: 'forestplot' }, series: [...] }).

Can KatuCharts pool the studies in a forest plot?

It draws a pooled estimate but does not compute it. Calculate the pooled effect with your meta-analysis tool, add it as a row with custom.isSummary: true, and it is drawn as a diamond (colour set by summaryDiamondColor). nullEffectValue sets the reference line: 1 for ratios, 0 for differences.

Why does my forest plot chart render as a line chart?

The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type " ", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.

Why do I get "Cannot read properties of null (reading 'appendChild')"?

The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.

Why is the chart rendering with zero height?

The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.

Bioinformática · katucharts.js/bio

Forest Plot

type: 'forestplot'

Gráfico forestal de metaanálisis mostrando tamaños de efecto con intervalos de confianza en estudios; el tamaño del cuadrado codifica el peso del estudio.

Edita el JSON a la derecha y presiona Ejecutar (o ⌘/Ctrl + Intro) — los datos, títulos, categorías y colores se actualizan en vivo.

En Vivo

Forest Plot

Editar · JSON

{
  "chart": {
    "type": "forestplot"
  },
  "title": {
    "text": "Metaanálisis"
  },
  "series": [
    {
      "name": "Studies",
      "nullEffectValue": 1,
      "data": [
        {
          "x": 1.2,
          "y": 1,
          "name": "Study A",
          "custom": {
            "ciLower": 0.9,
            "ciUpper": 1.6,
            "weight": 18
          }
        },
        {
          "x": 0.85,
          "y": 2,
          "name": "Study B",
          "custom": {
            "ciLower": 0.6,
            "ciUpper": 1.2,
            "weight": 24
          }
        },
        {
          "x": 1.45,
          "y": 3,
          "name": "Study C",
          "custom": {
            "ciLower": 1.05,
            "ciUpper": 2,
            "weight": 15
          }
        },
        {
          "x": 1.1,
          "y": 4,
          "name": "Study D",
          "custom": {
            "ciLower": 0.8,
            "ciUpper": 1.5,
            "weight": 20
          }
        },
        {
          "x": 1.15,
          "y": 5,
          "name": "Pooled",
          "custom": {
            "ciLower": 0.98,
            "ciUpper": 1.35,
            "isSummary": true
          }
        }
      ]
    }
  ]
}

Formato de datos

{ x: effectSize, y: rowIndex, name, custom: { ciLower, ciUpper, weight } }

Estructura de datos

El JSON que pasas dentro del gráfico — colócalo directamente en tu series.

data: [
  { x: 1.2, y: 1, name: 'Study A', custom: { ciLower: 0.9, ciUpper: 1.6, weight: 18 } },
  { x: 1.5, y: 2, name: 'Study B', custom: { ciLower: 1.1, ciUpper: 2.0, weight: 22 } },
  { x: 1.0, y: 3, name: 'Study C', custom: { ciLower: 0.8, ciUpper: 1.4, weight: 16 } }
]

Ejemplo

KatuCharts.chart('container', {
  series: [{ type: 'forestplot',
    data: [{ x: 1.2, y: 1, name: 'Study A', custom: { ciLower: 0.9, ciUpper: 1.6, weight: 18 } }] }]
});

Opciones específicas del tipo

Opción	Descripción
`nullEffectValue`	Línea nula (1 para HR/OR, 0 para MD).
`markerSizeByWeight`	Escala el tamaño del cuadrado por peso del estudio.

Common errors

Why does my forest plot chart render as a line chart?: The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type "<type>", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.
Why do I get "Cannot read properties of null (reading 'appendChild')"?: The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.
Why is the chart rendering with zero height?: The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.

FAQ

How do I create a forest plot chart in JavaScript?: Install with `npm install katucharts.js`, import the module with `import 'katucharts.js/bio';`, then call KatuCharts.chart(container, { chart: { type: 'forestplot' }, series: [...] }).
Can KatuCharts pool the studies in a forest plot?: It draws a pooled estimate but does not compute it. Calculate the pooled effect with your meta-analysis tool, add it as a row with custom.isSummary: true, and it is drawn as a diamond (colour set by summaryDiamondColor). nullEffectValue sets the reference line: 1 for ratios, 0 for differences.
Why does my forest plot chart render as a line chart?: The chart type was not registered. KatuCharts logs "KatuCharts: unknown series type "<type>", falling back to line" and draws a line chart rather than throwing. Import the module the type belongs to — for example `import 'katucharts.js/bio';` — before creating the chart.
Why do I get "Cannot read properties of null (reading 'appendChild')"?: The container element does not exist when the chart is created. Create the chart after the element is in the DOM: in React that means inside useEffect, not during render.
Why is the chart rendering with zero height?: The container has no height. A div with no content collapses to zero. Give it a height in CSS, or pass `chart: { height: 400 }` in the options.

Las opciones comunes (color, visible, marker, dataLabels, animation, events, zones…) se aplican a todos los tipos — véase Configuración → series. Míralo renderizado en la galería.