html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

    var chart;

    anychart.onDocumentReady(function () {

anychart.data.loadJsonFile('https://cdn.anychart.com/samples/heat-map-charts/periodic-table/data.json', function (data) {

    var dataSet = anychart.data.set(data);

​

    var heatMapData = dataSet.mapAs({x: 'column', y: 'row', heat: 'ElementCategory'});

​

    chart = anychart.heatMap(heatMapData);

    chart.yAxis(false).xAxis(false);

    chart.labels().format('{%Symbol}').fontSize(16);

    chart.dataArea({background: {fill: '#f7fbb6', stroke: '5 #f6b487'}});

    chart.title('Disable/Enable data area');

    chart.container('container');

    chart.draw();

​

})

    });

​

// Enable data area.

function enableDataArea() {

    chart.dataArea(true);

}

​

// Disable data area.

function disableDataArea() {

    chart.dataArea(false);

}