4.3.5 • Published 10 months ago

chartjs-chart-venn v4.3.5

Weekly downloads
56
License
MIT
Repository
github
Last release
10 months ago

Chart.js Venn and Euler Diagram Chart

NPM Package Github Actions

Chart.js module for charting venn diagrams with one, two, or three sets. Adding new chart type: venn and euler.

Works only with Chart.js >= 3.0.0

Sports Venn Diagram

Install

npm install --save chart.js@next chartjs-chart-venn

Usage

see Samples on Github

or at this Open in CodePen

Venn Diagram

Data Structure

const config = {
  type: 'venn',
  data: ChartVenn.extractSets(
    [
      { label: 'Soccer', values: ['alex', 'casey', 'drew', 'hunter'] },
      { label: 'Tennis', values: ['casey', 'drew', 'jade'] },
      { label: 'Volleyball', values: ['drew', 'glen', 'jade'] },
    ],
    {
      label: 'Sports',
    }
  ),
  options: {},
};

Alternative datastructure

const config = {
  type: 'venn',
  data: {
    labels: [
      'Soccer',
      'Tennis',
      'Volleyball',
      'Soccer ∩ Tennis',
      'Soccer ∩ Volleyball',
      'Tennis ∩ Volleyball',
      'Soccer ∩ Tennis ∩ Volleyball',
    ],
    datasets: [
      {
        label: 'Sports',
        data: [
          { sets: ['Soccer'], value: 2 },
          { sets: ['Tennis'], value: 0 },
          { sets: ['Volleyball'], value: 1 },
          { sets: ['Soccer', 'Tennis'], value: 1 },
          { sets: ['Soccer', 'Volleyball'], value: 0 },
          { sets: ['Tennis', 'Volleyball'], value: 1 },
          { sets: ['Soccer', 'Tennis', 'Volleyball'], value: 1 },
        ],
      },
    ],
  },
  options: {},
};

Styling of elements

ArcSlice elements have the basic backgroundColor, borderColor, and borderWidth properties similar to a regular rectangle.

Euler Diagram

Euler diagrams are relaxed proportional venn diagrams such that the area of the circles and overlap try to fit the overlapping value. It is a relaxed in a way that is just approximates the proportions using a numerical optimization process. Moreover, only one and two set overlaps are used for the computation. The library uses venn.js in the background.

Data Structure

const config = {
  type: 'euler',
  data: ChartVenn.extractSets(
    [
      { label: 'A', values: [1, 2, 3, 4, 11, 12, 13, 14, 15, 16, 17, 18] },
      { label: 'B', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 19, 20, 21, 22, 23] },
      { label: 'C', values: [1, 11, 12, 4, 5, 24, 25, 26, 27, 28, 29, 30] },
    ],
    {
      label: 'Sets',
    }
  ),
  options: {},
};

Styling of elements

see Venn Diagram

ESM and Tree Shaking

The ESM build of the library supports tree shaking thus having no side effects. As a consequence the chart.js library won't be automatically manipulated nor new controllers automatically registered. One has to manually import and register them.

Variant A:

import Chart from 'chart.js';
import { VennDiagramController } from 'chartjs-chart-venn';

// register controller in chart.js and ensure the defaults are set
VennDiagramController.register();
...

new Chart(ctx, {
  type: VennDiagramController.id,
  data: [...],
});

Variant B:

import { VennDiagramChart } from 'chartjs-chart-venn';

new VennDiagramChart(ctx, {
  data: [...],
});

Development Environment

npm i -g yarn
yarn set version 2
cat .yarnrc_patch.yml >> .yarnrc.yml
yarn
yarn pnpify --sdk

Common commands

yarn compile
yarn test
yarn lint
yarn fix
yarn build
yarn docs
yarn release
yarn release:pre
4.3.5

10 months ago

4.3.4

10 months ago

4.3.3

11 months ago

4.3.2

11 months ago

4.3.1

1 year ago

4.3.0

1 year ago

4.2.8

2 years ago

4.2.7

2 years ago

4.2.6

2 years ago

4.2.5

2 years ago

4.2.4

2 years ago

4.2.3

2 years ago

4.2.2

2 years ago

4.2.1

2 years ago

4.2.0

2 years ago

4.1.0

3 years ago

4.0.0

3 years ago

4.1.1

3 years ago

3.10.0

3 years ago

3.9.0

3 years ago

3.8.0

3 years ago

3.7.1

3 years ago

3.7.0

4 years ago

3.6.0

4 years ago

3.1.0

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

3.0.0-rc.6

4 years ago

3.0.0-rc.3

4 years ago

3.0.0-beta.9

5 years ago

3.0.0-beta.7

5 years ago

3.0.0-beta.6

5 years ago

3.0.0-beta.4

5 years ago

3.0.0-beta.3

5 years ago

3.0.0-beta.1

5 years ago

3.0.0-alpha.21

5 years ago

3.0.0-alpha.20

5 years ago

3.0.0-alpha.3

5 years ago

3.0.0-alpha.2

5 years ago

3.0.0-alpha.1

5 years ago