GitHub Contributions Calendar

Select a theme:
                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-calendar.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/themes/sea.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html, body, #container {
      width: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>

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

  <script>

    anychart.onDocumentReady(function() {
	// set chart theme
anychart.theme('sea');
      anychart.data.loadJsonFile(
        'https://cdn.anychart.com/samples/calendar-chart/github-contributions/data.json',
        function(data) {
          var dataset = anychart.data.set(data);
          var mapping = dataset.mapAs({
            x: 'date',
            value: 'level'
          });
          var chart = anychart.calendar(mapping);

          chart.background('#22282D');

          chart.months()
            .stroke(false)
            .noDataStroke(false);

          chart.days()
            .spacing(5)
            .stroke(false)
            .noDataStroke(false)
            .noDataFill('#2d333b')
            .noDataHatchFill(false);

          chart.colorRange(false);

          var customColorScale = anychart.scales.ordinalColor();
          customColorScale.ranges([
            {equal: 1, color: '#0D4428'},
            {equal: 2, color: '#006D31'},
            {equal: 3, color: '#37AB4B'},
            {equal: 4, color: '#39D353'}
          ]);

          // Set color scale.
          chart.colorScale(customColorScale);

          chart.tooltip()
            .format('{%count} contributions');

          chart.listen('chartDraw', function() {
            document.getElementById('container').style.height = chart.getActualHeight() + 'px';
          });

          chart.container('container');
          chart.draw();
        }
      );
    });
  
</script>
</body>
</html>
Warning!

GitHub Contributions Calendar

GitHub Contributions Calendar
