Use an offset to position month labels approx halfway the month.

g1eb · May 5, 2016 · b95f4a9 · b95f4a9
1 parent 599b2f2
commit b95f4a9
Showing 1 changed file with 2 additions and 1 deletion.
diff --git a/calendar-heatmap.js b/calendar-heatmap.js
@@ -195,6 +195,7 @@ angular.module('g1b.calendar-heatmap', []).
           var today = moment().endOf('day');
           var todayYearAgo = moment().startOf('day').subtract(1, 'year');
           var monthLabels = d3.time.months(todayYearAgo.startOf('month'), today);
+          var monthLabelOffset = (width - label_padding * 2) / 12 / 2;
           var monthAxis = d3.scale.linear()
             .range([label_padding, width])
             .domain([0, monthLabels.length]);
@@ -211,7 +212,7 @@ angular.module('g1b.calendar-heatmap', []).
               return d.toLocaleDateString('en-us', {month: 'short'});
             })
             .attr('x', function (d, i) {
-              return monthAxis(i);
+              return monthLabelOffset + monthAxis(i);
             })
             .attr('y', label_padding / 2)
             .on('mouseenter', function (d) {