Venn Diagram

Overview

A Venn diagram, named after John Venn, is a diagram representing all possible logical relations between a finite collection of different sets. Sets are shown as regions inside circles or other closed curves, and common elements of the sets are shown as intersections of these circles.

The AnyChart Venn chart type can be also used for creating Euler diagrams. The Euler diagram, named after Leonhard Euler, is very similar to the Venn diagram, but represents only relevant relations between sets.

This article explains how to create a basic Venn (or Euler) diagram as well as configure settings that are specific to the type. You can also see the table below to get a brief overview of the Venn diagram's characteristics:

API
Classanychart.charts.Venn
DATA
Data Fieldsx, value, name
Multiple SeriesN/A
OPTIONS
StackedN/A
VerticalN/A
3DN/A
Error BarsN/A
SUPPORTED CHART PLOTS
PolarN/A
RadarN/A
ScatterN/A
StockN/A
RELATED TYPES
Treemap
SEE ALSO
Chartopedia: Venn Diagram
General Settings

Quick Start

To create a Venn diagram, use the anychart.venn() chart constructor, like in the following sample:

//create data
var data = [
    {x: "A", value: 100},
    {x: "B", value: 100},
    {x: ["A", "B"], value: 25}
];

// create a chart and set the data
chart = anychart.venn(data);

// configure the labels of intersections
chart.intersections().labels().format("{%x}");

// set the container id
chart.container('container');

// initiate drawing the chart
chart.draw();

Playground

General Settings

In AnyChart there are many settings that are configured in the same way for all chart types, including the Venn diagram (for example, legend and interactivity settings).

Read the overview of general settings: General Settings.

Data

Data for a Venn diagram can be passed to the chart constructor anychart.venn() or to the data() method.

When you create data, you should use these data fields for both circles and intersection areas:

  • x to set unique identifiers
  • value to set sizes
  • name to set names

The name field is optional, and the names of elements, unlike identifiers, do not need to be unique. By default, the names of circles are shown in labels, tooltips, and the legend. However, in the case of intersections the default choice for labels is value.

Note: It is possible to add custom fields to your data – see the Labels and Tooltips section of this article.

The sample below shows two circles with their names set:

//create data
var data = [
    {
    	x: "A",
    	name: "Set A",
    	value: 400
    },
    {
    	x: "B",
    	name: "Set B",
    	value: 200
    }
];

// create a chart and set the data
chart = anychart.venn(data);

Playground

To set the identifier of an intersection (in its x field), combine the identifiers of intersecting circles. You can use an array:

// create data
var data = [
    {x: "A", value: 100},
    {x: "B", value: 100},
    {x: "C", value: 100},
    {x: ["A", "B"],	value: 20},
    {x: ["B", "C"], value: 20},
    {x: ["A", "B", "C"], value: 20}
];

Playground

With the help of data separators, the identifiers of circles can be also set as strings. The default separator is &:

// create data
var data = [
    {x: "A", value: 100},
    {x: "B", value: 100},
    {x: "C", value: 100},
    {x: "A&B", value: 20},
    {x: "A&C", value: 20},
    {x: "B&C", value: 20},
    {x: "A&B&C", value: 20}
];

The dataSeparator method allows you to change it to anything you like:

// create data
var data = [
    {x: "A", value: 100},
    {x: "B", value: 100},
    {x: "C", value: 100},
    {x: "A+B", value: 20},
    {x: "A+C", value: 20},
    {x: "B+C", value: 20},
    {x: "A+B+C", value: 20}
];

// set the data separator
chart.dataSeparator("+");

Playground

Appearance

Sets

The appearance settings of a Venn diagram can be configured in three states: normal, hover, and selected. Use the normal(), hovered(), and selected() methods.

Combine them with the following methods:

Also, you can use some other methods from anychart.core.StateSettings.

Please note that these settings affect only circles. To learn how to adjust intersection areas, see the next section.

In the sample below, there is a Venn diagram with appearance settings configured:

// configure the visual settings of the chart
chart.normal().fill("#00cc99", 0.3);
chart.hovered().fill("#00cc99", 0.1);
chart.selected().fill("#00cc99", 0.5);
chart.normal().hatchFill("percent50", "#004d39");
chart.hovered().hatchFill("percent50", "#004d39");
chart.selected().hatchFill("percent50", "#004d39");
chart.normal().stroke("#004d39");
chart.hovered().stroke("#004d39", 2);
chart.selected().stroke("#004d39", 4);

Playground

Intersections

Intersection areas can be configured in three states. Use the intersections() method with the normal(), hovered(), and selected() methods.

Combine them with these methods:

This sample shows a Venn diagram with the appearance of intersections configured:

// configure the visual settings of intersections
var intersections = chart.intersections();    
intersections.normal().fill("green", 0.3);
intersections.hovered().fill("green", 0.1);
intersections.selected().fill("green", 0.5);
intersections.normal().hatchFill("percent50", "white");
intersections.hovered().hatchFill("percent50", "white");
intersections.selected().hatchFill("percent50", "white");
intersections.normal().stroke("white");
intersections.hovered().stroke("white", 2);
intersections.selected().stroke("white", 4);

Playground

Individual Points

You can change the appearance of individual points, both sets and intersections, by adding special fields to your data:

//create data
var data = [
    {x: "A", value: 100,
     normal:   {fill: "#455a64 0.5"},
     hovered:  {fill: "#455a64 0.5"},
     selected: {fill: "#455a64 0.5"}
    },
    {x: "B", value: 100,
     normal:   {fill: "#00bfa5 0.5"},
     hovered:  {fill: "#00bfa5 0.5"},
     selected: {fill: "#00bfa5 0.5"}
    },
    {x: "C", value: 200,
     normal:   {fill: "#1976d2 0.5"},
     hovered:  {fill: "#1976d2 0.5"},
     selected: {fill: "#1976d2 0.5"}
    },
    {x: ["A", "B"], value: 10},
    {x: ["B", "C"], value: 10,
     normal:   {stroke: "2 white"},
     hovered:  {stroke: "2 white"},
     selected: {stroke: "4 white"}
    }
];

// create a chart and set the data
chart = anychart.venn(data);

Playground

Labels and Tooltips

Labels are text or image elements that can be placed anywhere on any chart (you can enable them on a whole series or in a single point). For text labels, font settings and text formatters are available.

A Tooltip is a text box displayed when a point on a chart is hovered. There is a number of visual and other settings available: for example, you can edit the text by using font settings and text formatters, change the style of background, adjust the position of a tooltip, and so on.

Tokens

When you create a Venn diagram, you can set labels and tooltips both for circles and intersections.

To change the text of labels, combine the labels() and format() methods with tokens, and to configure tooltips, do the same with the tooltip() and format() methods.

Use the intersections() method to set the labels and tooltips of intersections.

Here are tokens that work with the Venn diagram:

  • {%x}
  • {%value}
  • {%name}

Also, you can add a custom field to your data and use it as a token, like in the sample below.

//create data
var data = [
    {
        x: "A",
        name: "Set A",
        custom_field: "info 1",
        value: 100
    },
    {
        x: "B",
        name: "Set A",
        custom_field: "info 2",
        value: 100
    },
    {
        x: ["A", "B"],
        name: "Set A + Set B",
        value: 25
    }
];

// configure the labels of circles
chart.labels().format("{%name}\n\n{%custom_field}\n{%value}");

// configure the labels of intersections
chart.intersections().labels().format("{%name}\n\n{%value}");

// configure the tooltips of circles
chart.tooltip().format(
    "Set Info: {%custom_field}\nCardinality: {%value}"
);

// configure the tooltips of intersections
chart.intersections().tooltip().format(
    "Intersection Info: {%custom_field}\nCardinality: {%value}"
);

Playground

Formatting Functions

Labels and tooltips are also configured with the help of formatting functions and the following fields:

  • x
  • value
  • name

That is how it looks like:

// configure the labels of intersections
chart.intersections().labels().format(function (){
  if (this.x.length > 2)
      return this.x; 
});

// configure the tooltips of intersections
chart.intersections().tooltip().format(function (){
  return "Value: " + this.value + "\n(" +
         this.x.length + " sets intersecting)"; 
});

Playground