Merge pull request #5 from balloob/patch-1

Add `options.textPadding` to text in boxes.
fanthos · Feb 20, 2018 · 82215e4 · 82215e4
2 parents 88d6bc2 + 72aedad
commit 82215e4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chartjs-chart-timeline",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "timeline chart type for chart.js",
   "main": "timeline.js",
   "scripts": {

diff --git a/timeline.js b/timeline.js
@@ -225,6 +225,7 @@ Chart.controllers.timeline = Chart.controllers.bar.extend({
         var custom = rectangle.custom || {};
         var datasetIndex = me.index;
         var rectangleElementOptions = me.chart.options.elements.rectangle;
+        var textPad = me.chart.options.textPadding;
 
         rectangle._xScale = xScale;
         rectangle._yScale = yScale;
@@ -283,13 +284,13 @@ Chart.controllers.timeline = Chart.controllers.bar.extend({
             if (showText) {
                 ctx.beginPath();
                 var textRect = ctx.measureText(vm.text);
-                if (textRect.width > 0 && textRect.width < vm.width) {
+                if (textRect.width > 0 && textRect.width + textPad + 2 < vm.width) {
                     ctx.font = font;
                     ctx.fillStyle = vm.textColor;
                     ctx.lineWidth = 0;
                     ctx.strokeStyle = vm.textColor;
                     ctx.textBaseline = 'middle';
-                    ctx.fillText(vm.text, vm.x, vm.y + (vm.height) / 2);
+                    ctx.fillText(vm.text, vm.x + textPad, vm.y + (vm.height) / 2);
                 }
                 ctx.fill();
             }
@@ -387,6 +388,8 @@ Chart.defaults.timeline = {
 
     showText: true,
 
+    textPadding: 4,
+
     layout: {
         padding: {
             left: 0,
@@ -447,4 +450,4 @@ Chart.defaults.timeline = {
         }
     }
 };
-})();
+})();