How do I create a dispersión chart in JavaScript?

Install with `npm install katucharts.js`, then call KatuCharts.chart(container, { chart: { type: 'scatter' }, series: [...] }).

Why does my dispersión 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.

Cartesiano

Dispersión

type: 'scatter'

Nube de puntos X/Y con símbolos de marcador configurables y sin líneas conectadas. Compatible con jitter para puntos superpuestos.

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

Dispersión

Editar · JSON

{
  "chart": {
    "type": "scatter"
  },
  "title": {
    "text": "Latencia vs Rendimiento"
  },
  "series": [
    {
      "name": "Nodes",
      "data": [
        [
          5,
          925
        ],
        [
          9.2,
          851.9
        ],
        [
          3.6,
          823.6
        ],
        [
          15.6,
          747.1
        ],
        [
          5.5,
          889.5
        ],
        [
          17.8,
          833.8
        ],
        [
          11.8,
          820.9
        ],
        [
          16.5,
          727.6
        ],
        [
          20.1,
          725.7
        ],
        [
          15,
          834.1
        ],
        [
          26.7,
          767.3
        ],
        [
          16.7,
          773.6
        ],
        [
          29.2,
          636
        ],
        [
          22.7,
          718.9
        ],
        [
          28,
          751.8
        ],
        [
          31,
          730.7
        ],
        [
          26.4,
          693.2
        ],
        [
          37.8,
          575.5
        ],
        [
          27.8,
          695.5
        ],
        [
          40.6,
          670.6
        ],
        [
          33.6,
          703.3
        ],
        [
          39.5,
          589.8
        ],
        [
          41.9,
          549.7
        ],
        [
          37.8,
          638.8
        ],
        [
          48.9,
          616.1
        ],
        [
          39,
          655
        ],
        [
          51.9,
          493.1
        ],
        [
          44.6,
          536.4
        ],
        [
          51,
          559.1
        ],
        [
          52.8,
          590.2
        ],
        [
          49.2,
          571.5
        ],
        [
          60,
          428.5
        ],
        [
          50.2,
          505.1
        ],
        [
          63.2,
          485.5
        ],
        [
          55.6,
          569.6
        ],
        [
          62.5,
          465.7
        ],
        [
          63.7,
          397
        ],
        [
          60.7,
          441.8
        ],
        [
          71.1,
          441.4
        ],
        [
          61.4,
          524.6
        ],
        [
          74.6,
          368.3
        ],
        [
          66.5,
          374.6
        ],
        [
          74,
          359.9
        ],
        [
          74.6,
          425.4
        ],
        [
          72.1,
          443
        ],
        [
          82.1,
          302.9
        ],
        [
          72.6,
          331.9
        ],
        [
          85.9,
          289.3
        ],
        [
          77.5,
          411.9
        ],
        [
          85.5,
          340.5
        ],
        [
          85.5,
          267.5
        ],
        [
          83.6,
          258.2
        ],
        [
          93.2,
          251.3
        ],
        [
          83.9,
          371.5
        ],
        [
          97.2,
          247.9
        ],
        [
          88.5,
          236.8
        ],
        [
          97,
          169.9
        ],
        [
          96.4,
          241.2
        ],
        [
          95,
          294.8
        ],
        [
          104.2,
          186.7
        ]
      ]
    }
  ]
}

Formato de datos

[[x, y], …] · [{ x, y, name?, color? }]

Estructura de datos

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

data: [
  [2, 35],
  [4, 52],
  [6, 61],
  [8, 75]
]

Ejemplo

import KatuCharts from 'katucharts.js';

KatuCharts.chart('container', {
  chart: { type: 'scatter' },
  series: [{ name: 'Nodes', data: [[2, 35], [4, 52], [6, 61], [8, 75]] }]
});

Opciones específicas del tipo

Opción	Descripción
`marker.symbol`	'circle','square','diamond','triangle','triangle-down','cross'.
`marker.radius`	Tamaño de punto (predeterminado 4).
`jitter`	desplazamiento { x, y } para separar puntos superpuestos.

Variaciones

Símbolos por serie

Asigna a cada serie su propio símbolo de marcador para separar nubes superpuestas.

KatuCharts.chart('container', {
  chart: { type: 'scatter' },
  series: [
    { name: 'Group I', marker: { symbol: 'circle' }, data: [[2, 3], [3, 4], [4, 5]] },
    { name: 'Group II', marker: { symbol: 'triangle' }, data: [[6, 7], [7, 8], [8, 8.6]] }
  ]
});

Common errors

Why does my dispersión 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 dispersión chart in JavaScript?: Install with `npm install katucharts.js`, then call KatuCharts.chart(container, { chart: { type: 'scatter' }, series: [...] }).
Why does my dispersión 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.