How do I create a dispersão chart in JavaScript?

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

Why does my dispersão 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

Dispersão

type: 'scatter'

Nuvem de pontos X/Y com símbolos de marcador configuráveis e sem linhas de conexão. Suporta jitter para pontos sobrepostos.

Edite o JSON à direita e pressione Executar (ou ⌘/Ctrl + Enter) — dados, títulos, categorias e cores se atualizam ao vivo.

Ao Vivo

Dispersão

Editar · JSON

{
  "chart": {
    "type": "scatter"
  },
  "title": {
    "text": "Latência vs Vazão"
  },
  "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 dados

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

Estrutura de dados

O JSON que você passa dentro do gráfico — coloque direto na sua series.

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

Exemplo

import KatuCharts from 'katucharts.js';

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

Opções específicas do tipo

Opção	Descrição
`marker.symbol`	'circle','square','diamond','triangle','triangle-down','cross'.
`marker.radius`	Tamanho do ponto (padrão 4).
`jitter`	{ x, y } deslocamento para separar pontos sobrepostos.

Variações

Símbolos por série

Dê a cada série seu próprio símbolo de marcador para separar nuvens sobrepostas.

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

Opções comuns (color, visible, marker, dataLabels, animation, events, zones…) se aplicam a cada tipo — veja Configuração → series. Veja renderizado na galeria.