Previous All demos Next
  • Open in:

Venn Diagram with Patterns

Venn diagrams are one of the most popular diagram types for showing relationships between sets of data.

Related tutorials

Demo source

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}
</style>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/venn.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>

<!-- Chart code -->
<script>
am5.ready(function() {

// Create root
var root = am5.Root.new("chartdiv");

// Set themes
root.setThemes([
  am5themes_Animated.new(root)
]);

// Create wrapper container
var container = root.container.children.push(am5.Container.new(root, {
  width: am5.p100,
  height: am5.p100,
  layout: root.verticalLayout
}));

// Create venn series
var chart = container.children.push(am5venn.Venn.new(root, {
  categoryField: "name",
  valueField: "value",
  intersectionsField: "sets",
  paddingTop: 40,
  paddingBottom: 40,
  paddingLeft: 40,
  paddingRight: 40
}));

var pattern = am5.CirclePattern.new(root, {
  fill: am5.color(0x000000),
  color: am5.color(0xffffff),
  radius: 10,
  gap: 10,
  checkered: true
})

chart.slices.template.setAll({ templateField: "sliceSettings" });
chart.labels.template.set("fill", am5.color(0xffffff));
chart.labels.template.setup = function(target) {
  target.set("background", am5.RoundedRectangle.new(root, {
    stroke: am5.color(0xffffff),
    fill: am5.color(0x000000),
    cornerRadiusTL: 5,
    cornerRadiusTR: 5,
    cornerRadiusBL: 5,
    cornerRadiusBR: 5,
    fillOpacity: 1
  }));
}

// Set data
chart.data.setAll([{
	name: "Polar bear",
	value: 100,
	sliceSettings: {
		fill: am5.color(0xFFFFFF),
		stroke: am5.color(0x000000)
	}
}, {
	name: "Black bear",
	value: 100,
	sliceSettings: {
		fill: am5.color(0x000000),
		stroke: am5.color(0x000000)
	}
}, {
	name: "Panda",
	value: 30,
	sets: ["Polar bear", "Black bear"],
	sliceSettings: {
		fillPattern: pattern,
		stroke: am5.color(0x000000)
	}
}]);


// Set up hover appearance
chart.hoverGraphics.setAll({
  strokeDasharray: [3, 3],
  stroke: am5.color(0xffffff),
  strokeWidth: 2
});

}); // end am5.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>