Circos

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

Formato de dados

Estrutura de dados

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

data: [{
  custom: {
    chromosomes: [
      { id: 'chr1', length: 249 },
      { id: 'chr2', length: 198 }
    ],
    tracks: [
      {
        type: 'histogram',
        data: [
          { chr: 'chr1', start: 0, end: 50, value: 12 },
          { chr: 'chr2', start: 0, end: 40, value: 8 }
        ]
      }
    ]
  }
}]

Exemplo

KatuCharts.chart('container', {
  series: [{
    type: 'circos',
    gap: 3,
    data: [{
      custom: {
        chromosomes: [
          { id: 'chr1', length: 249 },
          { id: 'chr2', length: 198 }
        ],
        tracks: [
          {
            type: 'histogram',
            data: [
              { chr: 'chr1', start: 0, end: 50, value: 12 }
            ]
          }
        ]
      }
    }]
  }]
});

Opções específicas do tipo

Common errors

Why does my circos 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 circos chart in JavaScript?

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

What are the circos chart types called?

circos, circosHeatmap, circosComparative and circosSpiral. Note the camelCase. There is no circosChord type — it was documented in error in earlier versions and has never existed.

Why does my circos 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.