Scatter map showing a wrong layout.

[cullsin]

Hi,

I am a newbie working in circos.JS. I have the below react code where I am showing a chromosome layout and the scatter data points. Scatter data points did not rightly set into the block specification. Can you please suggest me why is it so? attached image shows chrX has 4 data points which is incorrect.

   import React, { useEffect } from "react";
   import Circos from "circos";

   const CircosChart = () => {
    useEffect(() => {
       const container = document.getElementById("circos-container");
      if (container) container.innerHTML = ""; // Clear previous renders

      const circos = new Circos({
      container: "#circos-container",
      width: 800,
      height: 800,
    });

// ✅ Corrected Layout Data (Using actual start and end values)
const layoutData = [
  { id: "chr9", label: "Chromosome 9", color: "#FFDDC1", start: 683318, end: 683902, len: 584 },
  { id: "chr8", label: "Chromosome 8", color: "#FFC3A0", start: 56678, end: 57038, len: 360 },
  { id: "chrX", label: "Chromosome X", color: "#A0C3FF", start: 147973, end: 148804, len: 831 }
];

// ✅ Corrected Scatter Data (Ensuring correct chromosome mapping)
const scatterData = [
  { block_id: "chr9", position: 683400, value: 514.91 },
  { block_id: "chr9", position: 683800, value: 480.32 },
  { block_id: "chr8", position: 56700, value: 371.67 },
  { block_id: "chr8", position: 56950, value: 390.45 },
  { block_id: "chrX", position: 148100, value: 514.16 }
];

// ✅ Ensure layout and scatter positions match actual data
circos.layout(layoutData, {
  innerRadius: 250,
  outerRadius: 300,
  labels: { display: true },
  ticks: { display: true, spacing: 100 },
});

// ✅ Scatter Plot for Gene Expression Data
circos.scatter("scatter", scatterData, {
  innerRadius: 200,
  outerRadius: 250,
  min: 0,
  max: 1000,
  color: "red",
  strokeColor: "black",
});

// ✅ Render Circos Chart
circos.render();
  }, []);

   return <div id="circos-container" style={{ width: "800px", height: "800px" }}></div>;
 };

 export default CircosChart;

`