Venn Diagram

Overview
Quick Start
General Settings
Special Settings

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
Class	anychart.charts.Venn
DATA
Data Fields	x, value, name
Multiple Series	N/A
OPTIONS
Stacked	N/A
Vertical	N/A
3D	N/A
Error Bars	N/A
SUPPORTED CHART PLOTS
Polar	N/A
Radar	N/A
Scatter	N/A
Stock	N/A
RELATED TYPES
	TreeMap
SEE ALSO
	Chartopedia: Venn Diagram
	General Settings

Quick Start

To create a Venn diagram, use the 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();

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

When you create data for a Venn diagram, you should use these data fields for each element (circles or intersection areas):

x to set a unique identifier
value to set the size
name to set the name

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. Read more in 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
    }
];

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

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

fill(), hatchFill(), stroke() set the fill, hatch fill, and stroke
hoverFill(), hoverHatchFill(), hoverStroke() configure the visual settings on hover
selectFill(), selectHatchFill(), selectStroke() configure the visual settings on select

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);

Playground

Here are methods that configure visual settings of intersection areas:

fill(), hatchFill(), stroke() set the fill, hatch fill, and stroke
hoverFill(), hoverHatchFill(), hoverStroke() configure the visual settings on hover
selectFill(), selectHatchFill(), selectStroke() configure the visual settings on select

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);

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}");

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}"
);

Playground