A Venn diagram draws each group as a circle and puts what groups share where the circles overlap. Here, three sets, A, B and C, with areas sized by how many items each part holds.
A Venn diagram shows at once which items belong to one group, to two, or to all of them: customers who buy from several product lines, skills people share, features products have in common. Two or three circles read best, and the areas only approximate the counts.
Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.
npm install @amcharts/amcharts5. See Getting started.
The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code."type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".
A complete page. Save it as an .html file and open it in a browser.
Paste this into an AI coding assistant to build the chart from scratch. More in amCharts & AI.
// Create root
var root = am5.Root.new("chartdiv");
// Set themes
root.setThemes([
am5themes_Animated.new(root),
am5themes_Responsive.new(root)
]);
// Create wrapper container
var chart = root.container.children.push(am5.SerialChartContainer.new(root, {
width: am5.p100, // the container fills the whole chart div
height: am5.p100,
layout: root.verticalLayout
}));
// Create venn series
var series = chart.series.push(am5venn.Venn.new(root, {
categoryField: "name",
valueField: "value",
intersectionsField: "sets", // an overlap lists, in "sets", the circles it belongs to
paddingTop: 40, // 40px of room on every side
paddingBottom: 40,
paddingLeft: 40,
paddingRight: 40
}));
// Set data
series.data.setAll([
{ name: "A", value: 10 },
{ name: "B", value: 10 },
{ name: "C", value: 5 },
// overlaps: "sets" names the circles each one belongs to
{ name: "X", value: 4, sets: ["A", "B"] },
{ name: "Y", value: 2, sets: ["A", "C"] },
{ name: "Z", value: 2, sets: ["B", "C"] },
{ name: "Q", value: 1, sets: ["A", "B", "C"]
}]);
// Set tooltip content
series.slices.template.set("tooltipText", "{category}: {value}");
// Set up hover appearance
series.hoverGraphics.setAll({
strokeDasharray: [3, 3], // a dashed outline around the area under the mouse...
stroke: am5.color(0xffffff), // ...in white...
strokeWidth: 2 // ...2px wide
});
// Add legend
var legend = chart.children.push(
am5.Legend.new(root, {
centerX: am5.p50, // the legend centered under the diagram
x: am5.p50
})
);
legend.data.setAll(series.dataItems);{
"type": "SerialChartContainer",
"settings": {
"width": {
"type": "Percent",
"value": 100
},
"height": {
"type": "Percent",
"value": 100
},
"layout": {
"type": "VerticalLayout"
}
},
"properties": {
"series": [
"#series-0"
]
},
"children": [
{
"type": "Legend",
"settings": {
"centerX": {
"type": "Percent",
"value": 50
},
"x": {
"type": "Percent",
"value": 50
}
},
"properties": {
"data": "#series-0.dataItems"
}
}
],
"refs": [
{
"data-0": [
{
"name": "A",
"value": 10
},
{
"name": "B",
"value": 10
},
{
"name": "C",
"value": 5
},
{
"name": "X",
"value": 4,
"sets": [
"A",
"B"
],
"__parse": true
},
{
"name": "Y",
"value": 2,
"sets": [
"A",
"C"
],
"__parse": true
},
{
"name": "Z",
"value": 2,
"sets": [
"B",
"C"
],
"__parse": true
},
{
"name": "Q",
"value": 1,
"sets": [
"A",
"B",
"C"
],
"__parse": true
}
]
},
{
"series-0": {
"type": "Venn",
"settings": {
"categoryField": "name",
"valueField": "value",
"intersectionsField": "sets",
"paddingTop": 40,
"paddingBottom": 40,
"paddingLeft": 40,
"paddingRight": 40
},
"properties": {
"data": "#data-0",
"slices": {
"properties": {
"template": {
"settings": {
"tooltipText": "{category}: {value}"
}
}
}
}
}
}
}
]
}
