html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/venn-charts/cooking-bacon-by-venn-chart/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/venn-charts/cooking-bacon-by-venn-chart/data.json',

    function (data) {

      // create venn diagram

      var chart = anychart.venn(data);

​

      // set chart title

      chart

        .title()

        .enabled(true)

        .padding({ bottom: 35 })

        .text('Cooking Bacon by Venn Diagram');

​

      // set chart stroke

      chart.stroke('2 #fff');

​

      // set labels settings

      chart.labels().fontSize(14).format('{%Name}');

​

      // set intersections labels settings

      chart

        .intersections()

        .labels()

        .fontColor('#fff')

        .fontWeight('bold')

        .format('{%Name}');

​

      // set font color for hover intersections labels

      chart.intersections().hovered().fill('#fff 0.5');

​

      // set legend padding

      chart.legend().padding({ top: 35 });

​

      // set tooltip settings

      chart.tooltip().titleFormat('{%Name}');

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});