How do I create a comparativo 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: 'circoscomparative' }, series: [...] }).

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

Comparativo Circos

type: 'circoscomparative'

Diseño de sintenia multiespecie — los cromosomas de varios genomas comparten un círculo, unidos por cintas de ancho variable entre regiones conservadas.

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

Comparativo Circos

Editar · JSON

{
  "chart": {
    "type": "circosComparative"
  },
  "title": {
    "text": "Genómica Comparativa"
  },
  "series": [
    {
      "name": "Synteny",
      "data": [
        {
          "custom": {
            "species": [
              {
                "name": "Human",
                "color": "#B43417",
                "chromosomes": [
                  {
                    "id": "H1",
                    "length": 120
                  },
                  {
                    "id": "H2",
                    "length": 90
                  },
                  {
                    "id": "H3",
                    "length": 70
                  }
                ]
              },
              {
                "name": "Mouse",
                "color": "#A85429",
                "chromosomes": [
                  {
                    "id": "M1",
                    "length": 100
                  },
                  {
                    "id": "M2",
                    "length": 80
                  },
                  {
                    "id": "M3",
                    "length": 60
                  }
                ]
              },
              {
                "name": "Chicken",
                "color": "#CE9A3A",
                "chromosomes": [
                  {
                    "id": "C1",
                    "length": 85
                  },
                  {
                    "id": "C2",
                    "length": 55
                  }
                ]
              }
            ],
            "synteny": [
              {
                "source": {
                  "species": "Human",
                  "chr": "H1",
                  "start": 10,
                  "end": 45
                },
                "target": {
                  "species": "Mouse",
                  "chr": "M1",
                  "start": 5,
                  "end": 38
                },
                "score": 0.9
              },
              {
                "source": {
                  "species": "Human",
                  "chr": "H2",
                  "start": 20,
                  "end": 55
                },
                "target": {
                  "species": "Mouse",
                  "chr": "M2",
                  "start": 12,
                  "end": 44
                },
                "score": 0.75
              },
              {
                "source": {
                  "species": "Human",
                  "chr": "H3",
                  "start": 5,
                  "end": 40
                },
                "target": {
                  "species": "Chicken",
                  "chr": "C1",
                  "start": 10,
                  "end": 48
                },
                "score": 0.6
              },
              {
                "source": {
                  "species": "Mouse",
                  "chr": "M1",
                  "start": 50,
                  "end": 80
                },
                "target": {
                  "species": "Chicken",
                  "chr": "C1",
                  "start": 50,
                  "end": 78
                },
                "score": 0.55
              },
              {
                "source": {
                  "species": "Mouse",
                  "chr": "M3",
                  "start": 8,
                  "end": 35
                },
                "target": {
                  "species": "Chicken",
                  "chr": "C2",
                  "start": 6,
                  "end": 32
                },
                "score": 0.7
              },
              {
                "source": {
                  "species": "Human",
                  "chr": "H1",
                  "start": 70,
                  "end": 100
                },
                "target": {
                  "species": "Chicken",
                  "chr": "C2",
                  "start": 10,
                  "end": 40
                },
                "score": 0.5
              }
            ],
            "ribbonColorMode": "source",
            "speciesGap": 8,
            "chrGap": 2
          }
        }
      ]
    }
  ]
}

Formato de datos

custom: { species: [{ name, color, chromosomes }], synteny: [{ source, target, score }] }

Estructura de datos

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

data: [{
  custom: {
    species: [
      { name: 'Human', chromosomes: [{ id: 'H1', length: 120 }] },
      { name: 'Mouse', chromosomes: [{ id: 'M1', length: 110 }] }
    ],
    synteny: [
      { source: { species: 'Human', chr: 'H1', start: 10, end: 45 }, target: { species: 'Mouse', chr: 'M1', start: 5, end: 38 }, score: 0.9 },
      { source: { species: 'Human', chr: 'H1', start: 60, end: 90 }, target: { species: 'Mouse', chr: 'M1', start: 50, end: 80 }, score: 0.85 }
    ]
  }
}]

Ejemplo

KatuCharts.chart('container', {
  series: [{ type: 'circosComparative', data: [{ custom: {
    species: [{ name: 'Human', chromosomes: [{ id: 'H1', length: 120 }] }],
    synteny: [{ source: { species: 'Human', chr: 'H1', start: 10, end: 45 },
               target: { species: 'Mouse', chr: 'M1', start: 5, end: 38 }, score: 0.9 }]
  } }] }]
});

Opciones específicas del tipo

Opción	Descripción
`ribbonColorMode`	'source' \| 'score'.
`speciesGap / chrGap`	Espaciado entre grupos y cromosomas.
`showConservationTrack`	Superpone una pista de conservación.

Common errors

Why does my comparativo 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 comparativo 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: 'circoscomparative' }, series: [...] }).
Why does my comparativo 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.