How do I create a pcoa chart in JavaScript?

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

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

Bioinformatics · katucharts.js/bio

PCoA

type: 'pcoa'

Principal Coordinates Analysis / ordination scatter with an optional confidence ellipse per group.

Edit the JSON on the right and press Run (or ⌘/Ctrl + Enter) — data, titles, categories and colors all update live.

Live

PCoA

Edit · JSON

{
  "chart": {
    "type": "pcoa"
  },
  "title": {
    "text": "Ordination"
  },
  "series": [
    {
      "name": "Samples",
      "data": [
        {
          "x": -5.498544298111037,
          "y": -2.5339714079480355,
          "name": "Sample 1"
        },
        {
          "x": 2.0425899266661984,
          "y": -1.691075464422885,
          "name": "Sample 2"
        },
        {
          "x": -2.4052938426894075,
          "y": 1.7264086564317425,
          "name": "Sample 3"
        },
        {
          "x": 2.250298614381159,
          "y": -2.7311626651614556,
          "name": "Sample 4"
        },
        {
          "x": -5.150868517021526,
          "y": 2.852878644925429,
          "name": "Sample 5"
        },
        {
          "x": 4.831386412802512,
          "y": -2.388554797869692,
          "name": "Sample 6"
        },
        {
          "x": -0.9404456237707712,
          "y": -2.569587444485712,
          "name": "Sample 7"
        },
        {
          "x": 3.443864117324226,
          "y": -0.47576404127829164,
          "name": "Sample 8"
        },
        {
          "x": -0.6662145621759952,
          "y": -1.5681373668537824,
          "name": "Sample 9"
        },
        {
          "x": 4.8153110400916175,
          "y": -2.5673438241401163,
          "name": "Sample 10"
        },
        {
          "x": 0.15239124899021483,
          "y": -1.2602755029315833,
          "name": "Sample 11"
        },
        {
          "x": 1.049655569297872,
          "y": 2.0611880189377705,
          "name": "Sample 12"
        },
        {
          "x": -4.1129583675535,
          "y": -0.9912473708309676,
          "name": "Sample 13"
        },
        {
          "x": 4.605469680489478,
          "y": -1.3710730144484649,
          "name": "Sample 14"
        },
        {
          "x": -0.12411962600808524,
          "y": 1.4214505659616092,
          "name": "Sample 15"
        },
        {
          "x": 0.8196744688969801,
          "y": 0.7688353804581198,
          "name": "Sample 16"
        },
        {
          "x": -4.683743180878221,
          "y": -0.1716004518527543,
          "name": "Sample 17"
        },
        {
          "x": 4.411230532369791,
          "y": -1.9484339421134758,
          "name": "Sample 18"
        },
        {
          "x": -1.8292263740014527,
          "y": -0.3076496145759241,
          "name": "Sample 19"
        },
        {
          "x": 3.8329537085564374,
          "y": -1.0470072469180516,
          "name": "Sample 20"
        },
        {
          "x": -1.5507672792773386,
          "y": -0.24564676568437993,
          "name": "Sample 21"
        },
        {
          "x": 1.914834542586314,
          "y": -0.8758146947955848,
          "name": "Sample 22"
        },
        {
          "x": -4.31754509808267,
          "y": -1.480425773635903,
          "name": "Sample 23"
        },
        {
          "x": 2.9840575656705144,
          "y": -0.44447408657937704,
          "name": "Sample 24"
        },
        {
          "x": -2.77594618338714,
          "y": 0.1725214497861649,
          "name": "Sample 25"
        },
        {
          "x": 4.068028684303191,
          "y": 1.8581082903389898,
          "name": "Sample 26"
        },
        {
          "x": -3.2739553374927075,
          "y": 0.13267229509788758,
          "name": "Sample 27"
        },
        {
          "x": 0.3232861485549119,
          "y": -2.0296607250623966,
          "name": "Sample 28"
        },
        {
          "x": -5.007766762289933,
          "y": 1.9640692984350672,
          "name": "Sample 29"
        },
        {
          "x": 0.6127069034732011,
          "y": 2.2649649235093636,
          "name": "Sample 30"
        },
        {
          "x": -5.234524828134593,
          "y": 0.841258421392421,
          "name": "Sample 31"
        },
        {
          "x": -0.4696947652564334,
          "y": 2.3401270558499982,
          "name": "Sample 32"
        },
        {
          "x": -1.9845671658260444,
          "y": -1.120336595103458,
          "name": "Sample 33"
        },
        {
          "x": 1.0028783413608355,
          "y": 1.8763184471766634,
          "name": "Sample 34"
        },
        {
          "x": -3.2158495091980783,
          "y": -1.2826720124880522,
          "name": "Sample 35"
        },
        {
          "x": 2.631519629742503,
          "y": 2.4504395317756007,
          "name": "Sample 36"
        },
        {
          "x": -1.9627851475614915,
          "y": -1.0299557932000196,
          "name": "Sample 37"
        },
        {
          "x": 2.033015225579045,
          "y": -0.6130765607702326,
          "name": "Sample 38"
        },
        {
          "x": -4.477728590348483,
          "y": 0.3156209693435774,
          "name": "Sample 39"
        },
        {
          "x": 3.141652765350093,
          "y": 2.2580456959624273,
          "name": "Sample 40"
        }
      ]
    }
  ]
}

Data format

{ x: PC1, y: PC2, name } (+ ellipse)

Data shape

The JSON you pass inside the chart — drop it straight into your series.

data: [
  { x: -2.5, y: 1.3, name: 'Sample A' },
  { x: -1.8, y: 2.1, name: 'Sample B' },
  { x: 1.2, y: -1.5, name: 'Sample C' }
]

Example

KatuCharts.chart('container', {
  series: [{ type: 'pcoa', data: [{ x: -2.5, y: 1.3, name: 'Sample A' }] }]
});

Type-specific options

Option	Description
`ellipse`	{ cx, cy, rx, ry, angle } confidence ellipse.

Variations

Confidence ellipse

Draw a group ellipse with the ellipse option to summarise a cluster.

KatuCharts.chart('container', {
  series: [{
    type: 'pcoa',
    data: [{ x: -2.5, y: 1.3, name: 'Sample A' }],
    ellipse: { cx: -2.5, cy: 0, rx: 3, ry: 3, angle: 0 }
  }]
});

Common errors

Why does my pcoa 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 pcoa chart in JavaScript?: Install with `npm install katucharts.js`, import the module with `import 'katucharts.js/bio';`, then call KatuCharts.chart(container, { chart: { type: 'pcoa' }, series: [...] }).
Why does my pcoa 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.

Common options (color, visible, marker, dataLabels, animation, events, zones…) apply to every type — see Configuration → series. See it rendered in the gallery.