In the new D3, they have extracted the layout/math portions into separate libraries.

I would love to use this library in https://reaviz.io but its so tightly coupled to ChartJS I'm not sure its possible w/o major mods.

HI,

I just study your venn implementation. It is great. I don't know how to select one zone just like your implementaion.

In benfred implementation, it don't support this. And when mouse hover, related zone is highlighted. Is this implemented by chart.js, right?

benfred: https://github.com/benfred/venn.js

Thanks.

br

wt

HI,

This library is great because i can select one part by mouse when hover.

If I want to select multi zone by mouse, How should I do?

I also just want to know how to set different colors for different zone in three circles?

Can you help me about it.

Thanks.

br

wt

I'm trying to add data more than 5 rows ,but unfortunately It show only 5 rows.

Example on CodePen : https://codepen.io/mengty/pen/LYzbJEJ

Anyone, Can you give me some issue please?

Thank you!

I'm trying to style a chart but none of the options except backgroundColor seem to work. In chart.js, normally the style options would go in the dataset, but without that, I'm not sure where they go. Can you point me in the right direction?

I have anexample on CodePen that shows backgroundColor working, but nothing else. Any pointers would be helpful, Thank you!

const chart = new Chart(ctx, {
  type: 'venn',
  data: data,
  options: {
    title: {
      display: true,
      text: 'Chart.js Venn Diagram Chart',
    },
    backgroundColor: ["#895b93", "#84cdec", 'orange', 'lime', 'fuchsia'], // These work!
    color: ['white', 'red', 'blue', 'rebeccapurple'], // These do nothing
    borderWidth: 10 // This affects only the legend
  }
});

.I want to get the values of set from backend and create venn diagram on select of values from dropdown.Is it possible to add a tag and give config options there?I am using reactjs.just like other barcharts and so on,I want to add a tag .Is it possible?

How to hide the dataset labels? i.e. I want to remove John Doe label from the chart, how can I achieve this?

Screenshots / Sketches

Context

• Version: 3.8.0
• Browser: Chrome, Firefox, Safari
• Angular 14

Additional context

I have tried the following:

plugins: {
 legend: {
  display: false,
 }
}

scales: {
 x: {
  display: false,
 },
 y: {
  display: false,
  }
}

I'm unable to test out the library.

I've setup a demo here - https://codesandbox.io/s/venn-test-s4ez7?file=/src/App.tsx where you can see the errors.

I think there might be version misalignments.

Hi Can you help me tooltip doesn't work when i try to use react structure

export const CiChartVenn = () => {
  const canvasRef = useRef(null);

  const vennOptions = useMemo(() =>  {
    return {
      type: "venn",
      data: extractSets(
        [
          {
            label: "A",
            values: ["alex", "casey", "drew", "hunter", "jade"]
          },
          { label: "B", values: ["casey", "drew", "jade"] },
          { label: "C", values: ["drew", "glen", "jade", "hunter"] },
          { label: "D", values: ["drew", "glen", "jade", "hunter"] }
        ],
        {
          label: 'Sports',
        }
      ),
      options: {
        plugins: {
          tooltip: {
            enabled: true,
            position: 'nearest',
            bodyColor: 'red',
            backgroundColor: 'rgba(249, 231, 159, 1)'
          }
        },
        title: {
          display: true,
          text: 'Venn Diagram'
        },
        backgroundColor: [
          "rgba(255, 26, 104, 0.2)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)",
          "rgba(153, 102, 255, 0.2)",
          "rgba(255, 159, 64, 0.2)"
        ],
        borderWidth: 1,
        // borderColor: [
        //   "rgba(255, 26, 104, 1)",
        //   "rgba(54, 162, 235, 1)",
        //   "rgba(255, 206, 86, 1)",
        //   "rgba(75, 192, 192, 1)",
        //   "rgba(153, 102, 255, 1)",
        //   "rgba(255, 159, 64, 1)"
        // ]
      }
    };
  }, []);

  // console.log(props.data,'config');

  useEffect(() => {
    const vennChart = new VennDiagramChart(canvasRef.current as any, vennOptions as any);

    return () => {
      vennChart.destroy();
    }
  },[vennOptions]);

  return (
    <div>
      <canvas ref={canvasRef} id="canvas"></canvas>
    </div>
  );
};