Katucharts
Comenzar
Bioinformática · katucharts.js/bio

Circos

type: 'circos'

Visualización de genoma circular con múltiples tipos de pista configurables (histograma, dispersión, mapa de calor, línea, enlace). La base para todas las variantes de circos.

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
Circos
Editar · JSON

Formato de datos

custom: { chromosomes: [...], tracks: [{ type, data, color }] }

Estructura de datos

El JSON que pasas dentro del gráfico — colócalo directamente en tu 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 }
        ]
      }
    ]
  }
}]

Ejemplo

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 }
            ]
          }
        ]
      }
    }]
  }]
});

Opciones específicas del tipo

OpciónDescripción
gapBrecha entre arcos de cromosoma en grados.
track typeshistograma, dispersión, mapa de calor, línea, enlace.

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.
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.