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 labels of intersections
chart.intersections().labels().format("{%X}");

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

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

JsFiddle 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.

Special 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 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.

Please note that it is possible to add custom fields to your data – see the Labels and Tooltips sections 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);

JsFiddle 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}
];

JsFiddle 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("+");

JsFiddle Playground

Appearance

Here is a full list of methods used to configure visual settings that are available for the Venn diagram:

You can learn more from the Appearance Settings section.

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

// configure visual settings
chart.fill("#00cc99", 0.3);
chart.hoverFill("#00cc99", 0.3);
chart.selectFill("#00cc99", 0.5);
chart.hatchFill("percent20", "#808080");
chart.hoverHatchFill("percent20", "#808080");
chart.selectHatchFill("percent20", "#808080");
chart.stroke("#00cc99");
chart.hoverStroke("#00cc99", 2);
chart.selectStroke("#00cc99", 4);

JsFiddle Playground

Here are methods that configure visual settings of intersection areas:

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

// configure visual settings of intersections
var intersect = chart.intersections();    
intersect.fill("white", 0.3);
intersect.hoverFill("white", 0.3);
intersect.selectFill("white", 0.5);
intersect.hatchFill("percent20", "#808080");
intersect.hoverHatchFill("percent20", "white");
intersect.selectHatchFill("percent20", "white");
intersect.stroke("white");
intersect.hoverStroke("white", 2);
intersect.selectStroke("white", 4);

JsFiddle Playground

Labels

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.

Please note: when you create a Venn diagram, you can set labels both for circles and intersections.

This chart type supports an optional data field – name. Names of circles are shown in their labels by default, but in the case of intersections the default choice is value. If you want some other field to be displayed in labels of intersections, you should configure them manually.

You can also add a custom data field and use it for configuring labels.

In the sample below, there is a Venn diagram with customized labels of circles and intersections:

//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 labels of circles
chart.labels().format("{%name}\n\n{%custom_field}\n{%value}");

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

JsFiddle Playground

Tooltips

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.

Please note: when you create a Venn diagram, you can set tooltips both for circles and intersections.

This chart type supports an optional data field – name, which is shown in tooltips of circles and intersections by default. You can also add a custom data field and use it for configuring tooltips.

In the sample below, there is a Venn diagram with customized tooltips of circles and intersections:

//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",
        custom_field: "info 3",
        value: 25
    }
];

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

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

JsFiddle Playground