html,

  body,

  #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

  }

anychart.onDocumentReady(function () {

  // adding data

  let data = [

    {

      x: "A",

      value: 100,

      name: "TOM BOMBADIL\n\nhomebody,\nblue jacket,\nboots yellow",

      normal: { fill: "#afb5f1 0.7" }

    },

    {

      x: "B",

      value: 100,

      name: "SANTA CLAUS\n\nwears red,\nho ho ho,\nsleigh",

      normal: { fill: "#fb7571 0.7" }

    },

    {

      x: "C",

      value: 100,

      name: "GANDALF\n\nfireworks,\nlikes adventures",

      normal: { fill: "#c7c2bd 0.7" }

    },

    {

      x: "D",

      value: 100,

      name: "DARK LORD SAURON\n\n cute,\nbabygirl, slay",

      normal: { fill: "#f9eb97 1" }

    },

    {

      x: "E",

      value: 50,

      name: "SARUMAN\n\ncrazy long\nfingernails,\nrainbow cloak"

    },

    {

      x: ["A", "C"],

      value: 40,

      name: "special hat,\nlikes hobbits",

      normal: { fill: "#99a0df 0.7" }

    },

    {

      x: ["A", "B"],

      value: 40,

      name: "merry fellow,\nwife guy",

      normal: { fill: "#b17cb8 0.7" }

    },

    {

      x: ["C", "D"],

      value: 40,

      name: "flirty with \nGaladriel in \nadaptations",

      normal: { fill: "#e3b55f 1" }

    },

    {

      x: ["B", "D"],

      value: 40,

      name: "teaches Elves to\nmake things,\nhas flying servants",

      normal: { fill: "#fd8f38 0.7" }

    },

    {

      x: ["C", "E"],

      value: 10,

      name: "wizard,\npipe-weed\nknows about\nhobbits"

    },

    {

      x: ["D", "E"],

      value: 10,

      name: "wants Ring,\nevil,\nmagic voice"

    },

    {

      x: ["A", "B", "C"],

      value: 30,

      name: "benevolent,\nbig beard",

      normal: { fill: "#a671af 0.7" }

    },

    {

      x: ["B", "C", "D"],

      value: 30,

      name: "giver of gifts,\nis coming to town,\nbling bling",

      normal: { fill: "#f1842f 1" }

    },

    {

      x: ["A", "B", "D"],

      value: 30,

      name: "loves to sing,\nsees you",

      normal: { fill: "#b2879b 1" }

    },

    {

      x: ["A", "C", "D"],

      value: 30,

      name: "lives in\nmiddle-earth",

      normal: { fill: "#a69ab0 1" }

    },

    {

      x: ["C", "D", "E"],

      value: 30,

      name: "irritable,\n emo maia\nno wife",

      normal: { fill: "d2a452 0.2" }

    },

    {

      x: ["A", "B", "C", "D"],

      value: 5,

      name: "ancient,\npowerful,\nmysterious,\nmany names",

      normal: { fill: "#ab8298 1" }

    }

  ];

​

  // creating a venn diagram with the data

  let chart = anychart.venn(data);

​

  // setting the labels

  chart

    .labels()

    .fontSize(14)

    .fontColor("#000")

    .hAlign("center")

    .vAlign("center")

    .fontWeight("500")

    .format("{%Name}");

​

  // setting the intersection labels

  chart

    .intersections()

    .labels()

    .fontSize(11)

    .fontColor("#000")

    .format("{%Name}");

  // setting the title

  chart

    .title()

    .enabled(true)

    .useHtml(true)

    .text(

      "<span style = 'color: #000; font-size:18px;'>Fun Venn Diagram Showing J.R.R. Tolkien's Characters</span>" +

        "<br/><span style='font-size: 15px; color:#cf0011'>(with Santa Claus)</span>"

    );

​

  // disabling the legend

  chart.legend(false);

  // improving the tooltip

  chart.tooltip().format("");

  chart.tooltip().separator(false);

​

  // setting the container id

  chart.container("container");

​

  // drawing the diagram

  chart.draw();

​

});