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/heat-map-charts/periodic-table/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/heat-map-charts/periodic-table/data.json',

    function (data) {

      // Sets data for Periodic Table

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

      var heatMapData = dataSet.mapAs({

        x: 'column',

        y: 'row',

        heat: 'ElementCategory'

      });

​

      // Creates Heat Map

      var chart = anychart.heatMap(heatMapData);

​

      // Sets selection mode for single selection.

      chart.interactivity().selectionMode('none');

​

      // Sets colorScale

      var colorScale = anychart.scales.ordinalColor();

      // Sets colors for all points

      colorScale.ranges([

        { equal: 'Alkali metals', color: '#ef6c00 0.8' },

        { equal: 'Alkaline earth metals', color: '#ffa000 0.8' },

        { equal: 'Transition elements', color: '#ffd54f 0.8' },

        { equal: 'Other metals', color: '#00bfa5 0.8' },

        { equal: 'Metalloids', color: '#00838f 0.8' },

        { equal: 'Other nonmetals', color: '#64b5f6 0.8' },

        { equal: 'Halogens', color: '#1976d2 0.8' },

        { equal: 'Noble gases', color: '#01579b 0.8' },

        { equal: 'Unknown', color: '#96a6a6 0.8' }

      ]);

      chart.colorScale(colorScale);

​

      // Sets chart settings and hover chart settings

      chart.stroke('#fff');

      chart

        .hovered()

        .stroke('6 #fff')

        .fill('#545f69')

        .labels({ fontColor: '#fff' });

​

      // Sets chart title

      chart.padding([10, 10, 10, 10]);

      chart

        .title()

        .enabled(true)

        .text('Periodic Table of Elements')

        .padding([0, 0, 10, 2])

        .align('left');

​

      // Sets tooltip formatter and tooltip title formatter

      chart

        .tooltip()

        .title({ useHtml: true })

        .useHtml(true)

        .titleFormat(function () {

          return (

            '<span style="color: #CECECE">' +

            this.getData('Symbol') +

            ': </span>' +

            '<span style="font-size: 16px">' +

            this.getData('name') +

            '</span>'

          );

        })

        .format(function () {

          return (

            '<span style="color: #CECECE">Category: </span>' +

            this.getData('ElementCategory') +

            '<br/>' +

            '<span style="color: #CECECE">Atomic number: </span>' +

            this.getData('Number') +

            '<br/>' +

            '<span style="color: #CECECE">Group: </span>' +

            this.x +

            '<br/>' +

            '<span style="color: #CECECE">Period: </span>' +

            this.y

          );

        });

​

      // Sets labels for chart

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

​

      // Sets legend

      chart

        .legend()

        .align('top')

        .position('right')

        .itemsLayout('vertical')

        .padding([2, 10, 0, 20])

        .enabled(true)

        .tooltip(false);

​

      // Turns off axes

      chart.yAxis(false);

      chart.xAxis(false);

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});