html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  var data = [

    {

      x: 'A',

      name: 'Play computer games',

      value: 100

    },

    {

      x: 'B',

      name: 'Too much homework',

      value: 100

    },

    {

      x: 'A&B',

      name: 'Late nights',

      value: 25,

      // set hover fill settings

      hovered: {

        fill: anychart.color.lighten('#3a444d')

      }

    }

  ];

​

  // create venn diagram

  var chart = anychart.venn(data);

​

  // set chart title

  chart

    .title()

    .enabled(true)

    .padding({ bottom: 35 })

    .text('Schoolboy Behavior');

​

  // set chart labels format

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

​

  // set intersections labels settings

  chart.intersections().labels().fontWeight('bold').format('{%Name}');

​

  // 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();

});