The react-chord-diagram from langfordg

react-chord-diagram's People

Contributors

Stargazers

Watchers

react-chord-diagram's Issues

Broken Examples?

Looks like https://langfordg.github.io/react-chord-diagram/ is broken; examples don't render

Labels are getting hide after set outerRadius props

Problem

Hi! I was trying to fit the chart in my template because of the labels was overflowing the container and get cropped. So I try to set the outerRadius prop and the chart gets a little small like I want but the Labels get hide.

Code

import React, { useState } from "react";
import "./styles.css";
import ChordDiagram from "react-chord-diagram";

export default function App() {
  const [state, setState] = useState([
    [0, 9, 14, 16, 24, 18, 7, 21, 7, 6],
    [12, 0, 17, 16, 13, 23, 4, 16, 10, 8],
    [6, 13, 0, 6, 1, 8, 5, 8, 10, 14],
    [30, 15, 3, 0, 32, 13, 3, 53, 6, 8],
    [38, 28, 17, 54, 0, 27, 50, 138, 3, 4],
    [10, 7, 10, 13, 8, 0, 4, 8, 9, 8],
    [13, 12, 11, 16, 21, 23, 0, 31, 7, 8],
    [43, 22, 10, 45, 105, 47, 56, 0, 3, 8],
    [2, 3, 0, 0, 0, 0, 0, 0, 0, 6],
    [0, 0, 0, 2, 0, 0, 0, 0, 3, 0]
  ]);

  return (
    <div className="App">
      <ChordDiagram
        className="chartDiagram"
        matrix={state}
        componentId={1}
        groupLabels={[
          "Ignizione ON",
          "Movimento ON",
          "Movimento OFF",
          "LBL1",
          "LBL2",
          "Tagliando1",
          "Tagliando2",
          "Tagliando3",
          "Tagliando4",
          "Tagliando5"
        ]}
        groupColors={[
          "#2255A4",
          "#006629",
          "#15295E",
          "#790D1A",
          "#FFE000",
          "#060606",
          "#0F793B",
          "#15295E",
          "#B40224",
          "#13803F"
        ]}
        disableRibbonHover={false}
        disableGroupHover={false}
        outerRadius="150"
        innerRadius="140"
        blurOnHover={true}
        ribbonOpacity=".9"
        ribbonBlurOpacity="0.2"
        style={{
          fontFamily: "Sans serif",
          fontSize: "12px",
          color: "#333"
        }}
      />
    </div>
  );
}