BerandaComputers and TechnologyHow to Create a Venn Diagram Using JavaScript (HTML5), for a Website...

How to Create a Venn Diagram Using JavaScript (HTML5), for a Website or App

Venn diagram web chart built using JavaScript, on a laptop screenA Venn diagram is a form of data visualization that uses shapes, generally circles, to show the relationships among groups of things. In this chart type, overlapping areas show commonalities while circles that do not overlap show the traits that are not shared.

Introduced by John Venn, an English mathematician, logician, and philosopher, Venn diagrams are also called set diagrams or logic diagrams since they show possible logical relations between elements of different sets. When drawing such charts, we will most probably be dealing with two or three overlapping circles, since having only one circle would be boring, and having four or more circles quickly becomes really complicated.

Not only are these diagrams good visualizations as a concept, but they also provide a great opportunity to represent qualitative data and a bit of graphic humor. Basically, they are easy and fun to build and use. I’ll show you right now!

Read this tutorial to learn how to easily create a visually appealing and informative Venn diagram for your website or app with the help of JavaScript. All the code used and demonstrated along the tutorial will be freely available for you to play with.

During the ongoing coronavirus pandemic, with working from home and avoiding food from outside, many of us have become amateur chefs. So, let us use a JS-based Venn diagram to find out what kind of recipe would be the best to try out on a working day — this is going to be a delightful use case to explore!

Spoiler: Venn Diagram To Be Developed

Before we begin, I decided to stimulate your appetite for a cool data visualization and learning experience and show you how the final interactive JavaScript Venn diagram will look.

Check it out and follow the charting tutorial!

An animated demonstration of an interactive Venn diagram data visualization created along the tutorial

4 Simple Steps to a Basic JS Venn Diagram

Venn diagrams are a treat for the visualizers and the audience — they provide great value and quick insights while being straightforward to make and understand.

Let us see how we can make a Venn diagram using JavaScript (HTML5). It may not be as easy as creating circles on a paper napkin with different colored sketch pens (to compare dogs and cats maybe!). But believe me, it is almost that simple and definitely more exciting when you are doing things right.

We’ll start with a very basic Venn diagram and then customize it.

Actually, you should follow these 4 steps to build a beautiful JavaScript chart of literally any kind, including a Venn diagram:

  • Create an HTML page for the chart.
  • Include the necessary JavaScript files.
  • Add the data.
  • Write the JS code for the diagram.

1. Create an HTML page

Create a basic HTML page with a block-level element where the Venn diagram will be rendered. This div element will hold the chart and is given a unique id to reference it later.

    JavaScript Venn Diagram

The width and height of the container are set to 100% so that the chart fills the whole screen. You can set other values to change the size of the graphic as necessary.

2. Include the necessary JavaScript files

To create a JavaScript chart, it is necessary to link the appropriate JS scripts that are going to be used to develop it. These files have to be included inside the                     


Note: We add a script tag in the body where we will write our code for creating the chart.

3. Add the data

Data is what makes the chart, and therefore, it’s an essential aspect of the visualization. A great advantage of AnyChart is that it provides various ways to add data. In this Venn diagram, we are using simple data so we can directly include the data into our page.

Every chart renders data in a specific form so it is important to make sure that we have the data in the way that makes sense for rendering the Venn diagram. It is very intuitive so nothing to be scared of.

Our data is about the 3 facets that we consider while choosing a recipe to try out during these work-from-home times. A perfect recipe is one that has all the 3 favorable characteristics.

We list out the 3 attributes in consideration as 3 data points and the intersections of 2 combinations as well as all 3 of them as other separate data points.

The Venn diagram accepts an array of data so we structure the data likewise.

data = [
    x: 'A',
    value: 100,
    name: 'TIME n Can be quickly made'
    x: 'B',
    value: 100,
    name: 'INGREDIENTS n Key elements available'
    x: 'C',
    value: 100,
    name: 'COMPLEXITY n Manageable level'
    x: ['A', 'C'],
    value: 25,
    name: 'Add to n wishlist'
    x: ['A', 'B'],
    value: 25,
    name: 'Possibility n of disaster'
    x: ['B', 'C'],
    value: 25,
    name: 'Try on a n holiday'
    x: ['A', 'B', 'C'],
    value: 25,
    name: 'The perfect n recipe'

The data points are given a value to indicate the amount of overlapping and non-overlapping. Since our data is qualitative, we have given each overlap the same value. The name indicates the description of each data point. The n symbol seen in the description is a newline character that inserts a line break.

4. Write the JS code for the Venn diagram

Now that everything is in place, we are ready to see the magic happen! With just a few lines of code, we will have our basic Venn diagram ready.

All the JavaScript code is placed inside the

Next, we add the data and create the chart using that data. Then we set the container to reference our previously added HTML element and draw the chart.

anychart.onDocumentReady(function () {
  var data = [{data}];
  // create venn diagram
  var chart = anychart.venn(data);
  // set container id for the chart
  // initiate chart drawing

Our Venn diagram is drawn but we add just 2 more lines of code to give the chart a title and format the labels to represent the intersecting data text instead of values since that makes more sense for our subjective data.

// set chart title
chart.title('The perfect recipe to try while working from home');
// set labels settings

Have a look at the result:

Check out this basic Venn diagram with the full JS/CSS/HTML code on Playground or CodePen.

Isn’t it a delight to see a fully functional, good looking, interactive Venn diagram created with JavaScript in so few lines of code?

Customizing a Venn Diagram (To Make It Even More Awesome)

The AnyChart library provides a plethora of options to tweak the appearance of data visualizations. Whatever you do, there is always room for improvement, and we can definitely change a few things in our JS Venn diagram to make it more engaging, highlight some certain points, add functionality to understand the data better, or just polish the aesthetics to suit our taste!

The easiest way to change the look of the data viz is to try the various color themes that AnyChart offers. This can be done simply by adding the desired theme to the head of the page and then referencing it in the code.

// set chart theme

Let’s look at some other quick modifications in this tutorial:

  • Overall chart appearance improvement.
  • Custom colors for each data point.
  • Font change.
  • Special effects.

1. Overall chart appearance improvement

We will make some small changes here and there to refine the Venn diagram visualization. Again, you will see how easy it is to make these changes.

Since our Venn diagram shows the data points text on the chart, we do not really need the legend.

// disable legend

Then, let’s add a stroke to the circles that will make the intersecting areas stand out.

// set chart stroke
chart.stroke('1 #fff');

And modify the text sizing, styling, and positioning to enhance the title and labels.

// set chart title
  .padding({ bottom: 25 })
  .text("The perfect recipe to try while working from home");

// set labels settings

// set intersections labels settings

There you go:

Check out this half-way customized Venn diagram with the full JS/CSS/HTML code on Playground or CodePen.

2. Custom colors for each data point

When we want a different color for each of the data points, the best way is to add the color property to the data. In AnyChart, we can specify not only the colors for each area but also the colors on hovering and selecting those areas.

Let’s add normal, hovered, and selected properties to our data, as well as specify the fill color and opacity.

Here’s an example for data point A:

  x: 'A',
  value: 100,
  name: 'TIME n Can be quickly made',
  normal: {fill: "#8ecafb 0.7"},
  hovered: {fill: "#8ecafb 1"},
  selected: {fill: "#8ecafb 1"}

3. Font change

We can use existing fonts or add Google Fonts the way we’ll do it here. We’ll simply link the stylesheet of a Google font that we’d like to use in the head of the page and then specify that font family wherever we want to apply it.

// add this in the code
.fontFamily('Roboto, sans-serif')

4. Some special effects

To spice up our JavaScript Venn diagram, let’s add a texture fill in the intersecting areas and some interesting text in the chart tooltip.

Since the tooltip text and texture fill color will be specific to each data point, we’ll include that in the data.

Here’s an example for one of the intersection data points:

  x: ['A', 'C'],
  value: 20,
  name: 'Add ton wishlist',
  tooltipTitle: 'Add to wishlist',
  tooltipDesc: 'Add the ingredients in the next shopping list',
  normal:   {fill: "#a98caf 0.6"},
  hovered : {fill: "#a98caf 1"},
  selected:   {fill: "#a98caf 1"},
    color: "#8b6b92"

Include this change in the code:

// set tooltip settings
  .background().fill("#000 0.5");

Check out the final interactive JavaScript-based Venn diagram with all these customizations! For your convenience, its full code is right below the embedded interactive graphic.


    JavaScript Venn Diagram

See this customized Venn diagram with the full JS/CSS/HTML code on Playground or CodePen.


This tutorial shows you how to quickly whip up a Venn diagram and make it more appealing with the various enhancements. You can play around with colors, patterns, and other possible customization alternatives. To learn more about the Venn diagram as a chart type, see its profile on Chartopedia.

Some working knowledge of HTML and JavaScript is always helpful. But as we saw, creating visualizations with a robust JavaScript charting library with pre-built chart types and out-of-the-box features is so simple that even without any technical knowledge, it is easy to make useful and beautiful interactive charts. Also, the great thing about AnyChart specifically is that there are extensive documentation and other resources to help create and customize the visualizations without hassle.

To continue learning and practicing with data visualization, check out other JavaScript charting tutorials and see the full list of charts you can build and main features you can make use of with AnyChart. Then, have fun creating stunning visualizations, in a quick and effortless way.

Read More



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments