Venn Diagram | samples | Chartopedia

HTMLcopy

 
<div id="container"></div>

CSScopy

 
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScriptAutocompletecopy

​x
 
anychart.onDocumentReady(function () {
    // create bar chart
    var chart = anychart.venn(getData());
​
    //set chart stroke
    chart.stroke('2 #fff');
​
    //set labels settings
    chart.labels(false);
​
    //set font color for hover intersections labels
    chart.intersections().hovered().fill('black 0.25');
​
    //set legend settings
    chart.legend()
        .position('right')
        .itemsLayout('vertical')
        .itemsSpacing(3)
        .padding({left: 35});
​
    chart.container('container');
    //initiate chart drawing
    chart.draw();
​
    function getData() {
        return [
            {
                x: 'A',
                name: 'Data Science',
                value: 100,
                stroke: 'none',
                label: {
                    enabled: true,
                    fontColor: '#3b8ad8',
                    fontSize: 14
                }
            }, {
                x: 'B',
                name: 'Computer Science',
                value: 25
            }, {
                x: 'C',
                name: 'Math and Statistics',
                value: 25
            }, {
                x: 'D',
                name: 'Subject Matter Expertise',
                value: 25
            }, {
                x: ['A', 'B'],
                name: 'Computer Science',
                value: 50
            }, {
                x: ['A', 'C'],
                name: 'Math and Statistics',
                value: 50
            }, {
                x: ['A', 'D'],
                name: 'Subject Matter Expertise',
                value: 50
            }, {
                x: ['B', 'C'],
                name: 'Machine Learning',
                value: 5
            }, {
                x: ['C', 'D'],
                name: 'Traditional Research',
                value: 5
            }, {
                x: ['D', 'B'],
                name: 'Traditional Software',
                value: 5
            }, {
                x: ['B', 'C', 'D'],
                name: 'Unicorn',
                value: 5
            }
        ];
    }
});

Sample meta

AnyChart Documentation