title: How to add padding between Graph and X/Y-Scale in chart.js?
body: <p>I have a simple Line-Chart using <code>chart.js</code>.</p>
  <p>It should look something like this: <a href="http://fs1.directupload.net/images/150819/ktkgs9pw.jpg" rel="nofollow noreferrer">http://fs1.directupload.net/images/150819/ktkgs9pw.jpg</a> (Photoshop, I marked the paddings with red lines)</p>
  <p>What it looks like at the moment with <code>chart.js</code>: <a href="http://fs2.directupload.net/images/150819/ql5l3jez.png" rel="nofollow noreferrer">http://fs2.directupload.net/images/150819/ql5l3jez.png</a></p>
  <p>As you can see, the outline of the Graph-Points overlaps the X-Scale at the bottom, which is &quot;2:00 PM&quot; for example and the Y-Scale on the left, which is &quot;0&quot; for example.</p>
  <p>My Line-Chart-Code:</p>
  <p><b>HTML:</b></p>
  <pre><code>&lt;canvas id=&quot;server-usage&quot;&gt;&lt;/canvas&gt;
  </code></pre>
  <p><b>Global Chartsettings:</b></p>
  <pre><code>Chart.defaults.global = {
              // Boolean - Whether to animate the chart
              animation: false,
  
              // Number - Number of animation steps
              animationSteps: 60,
  
              // String - Animation easing effect
              // Possible effects are:
              // [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
              //  easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
              //  easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
              //  easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
              //  easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
              //  easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
              //  easeOutElastic, easeInCubic]
              animationEasing: &quot;easeInOutQuart&quot;,
  
              // Boolean - If we should show the scale at all
              showScale: true,
  
              // Boolean - If we want to override with a hard coded scale
              scaleOverride: true,
  
              // ** Required if scaleOverride is true **
              // Number - The number of steps in a hard coded scale
              scaleSteps: 7,
              // Number - The value jump in the hard coded scale
              scaleStepWidth: 18,
              // Number - The scale starting value
              scaleStartValue: 0,
  
              // String - Colour of the scale line
              scaleLineColor: &quot;#565a60&quot;,
  
              // Number - Pixel width of the scale line
              scaleLineWidth: 0.1,
  
              // Boolean - Whether to show labels on the scale
              scaleShowLabels: true,
  
              // Interpolated JS string - can access value
              scaleLabel: &quot;&lt;%=value%&gt;&quot;,
  
              // Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
              scaleIntegersOnly: true,
  
              // Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
              scaleBeginAtZero: false,
  
              // String - Scale label font declaration for the scale label
              scaleFontFamily: &quot;'Open Sans', sans-serif&quot;,
  
              // Number - Scale label font size in pixels
              scaleFontSize: 13,
  
              // String - Scale label font weight style
              scaleFontStyle: &quot;500&quot;,
  
              // String - Scale label font colour
              scaleFontColor: &quot;#7c8189&quot;,
  
              // Boolean - whether or not the chart should be responsive and resize when the browser does.
              responsive: true,
  
              // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
              maintainAspectRatio: false,
  
              // Boolean - Determines whether to draw tooltips on the canvas or not
              showTooltips: true,
  
              // Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
              customTooltips: false,
  
              // Array - Array of string names to attach tooltip events
              tooltipEvents: [&quot;mousemove&quot;, &quot;touchstart&quot;, &quot;touchmove&quot;],
  
              // String - Tooltip background colour
              tooltipFillColor: &quot;#42454a&quot;,
  
              // String - Tooltip label font declaration for the scale label
              tooltipFontFamily: &quot;'Open Sans', sans-serif&quot;,
  
              // Number - Tooltip label font size in pixels
              tooltipFontSize: 15,
  
              // String - Tooltip font weight style
              tooltipFontStyle: &quot;normal&quot;,
  
              // String - Tooltip label font colour
              tooltipFontColor: &quot;#e7e7e7&quot;,
  
              // String - Tooltip title font declaration for the scale label
              tooltipTitleFontFamily: &quot;'Open Sans', sans-serif&quot;,
  
              // Number - Tooltip title font size in pixels
              tooltipTitleFontSize: 14,
  
              // String - Tooltip title font weight style
              tooltipTitleFontStyle: &quot;regular&quot;,
  
              // String - Tooltip title font colour
              tooltipTitleFontColor: &quot;#fff&quot;,
  
              // Number - pixel width of padding around tooltip text
              tooltipYPadding: 6,
  
              // Number - pixel width of padding around tooltip text
              tooltipXPadding: 6,
  
              // Number - Size of the caret on the tooltip
              tooltipCaretSize: 8,
  
              // Number - Pixel radius of the tooltip border
              tooltipCornerRadius: 0,
  
              // Number - Pixel offset from point x to tooltip edge
              tooltipXOffset: 10,
  
              // String - Template string for single tooltips
              tooltipTemplate: &quot;On &lt;%if (label){%&gt;&lt;%=label%&gt; there were &lt;%}%&gt;&lt;%= value %&gt; active users&quot;,
  
              // String - Template string for multiple tooltips
              multiTooltipTemplate: &quot;&lt;%= value %&gt;&quot;,
  
              // Function - Will fire on animation progression.
              onAnimationProgress: function(){},
  
              // Function - Will fire on animation completion.
              onAnimationComplete: function(){}
  }
  </code></pre>
  <p><b>Some Chart-Data:</b></p>
  <pre><code>var usageData = {
       labels : [&quot;2:00 PM&quot;,&quot;4:00 PM&quot;,&quot;6:00 PM&quot;,&quot;8:00 PM&quot;,&quot;10:00 PM&quot;,&quot;0:00 AM&quot;,&quot;2:00 AM&quot;],
       datasets : [
           {
                 strokeColor : &quot;#61666c&quot;,
                 pointColor : &quot;#4e82c9&quot;,
                 pointStrokeColor : &quot;#565a60&quot;,
                 data : [0,120,120,100,60,40,0]
            }
       ]
  }
  </code></pre>
  <p><b>Chart-Options:</b></p>
  <pre><code>var options = {
  
              ///Boolean - Whether grid lines are shown across the chart
              scaleShowGridLines : false,
  
              //String - Colour of the grid lines
              scaleGridLineColor : &quot;rgba(0,0,0,.05)&quot;,
  
              //Number - Width of the grid lines
              scaleGridLineWidth : 1,
  
              //Boolean - Whether to show horizontal lines (except X axis)
              scaleShowHorizontalLines: true,
  
              //Boolean - Whether to show vertical lines (except Y axis)
              scaleShowVerticalLines: true,
  
              //Boolean - Whether the line is curved between points
              bezierCurve : false,
  
              //Number - Tension of the bezier curve between points
              bezierCurveTension : 0.4,
  
              //Boolean - Whether to show a dot for each point
              pointDot : true,
  
              //Number - Radius of each point dot in pixels
              pointDotRadius : 18,
  
              //Number - Pixel width of point dot stroke
              pointDotStrokeWidth : 8,
  
              //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
              pointHitDetectionRadius : 20,
  
              //Boolean - Whether to show a stroke for datasets
              datasetStroke : true,
  
              //Number - Pixel width of dataset stroke
              datasetStrokeWidth : 4,
  
              //Boolean - Whether to fill the dataset with a colour
              datasetFill : false,
  
              //String - A legend template
              legendTemplate : &quot;&lt;ul class=\&quot;&lt;%=name.toLowerCase()%&gt;-legend\&quot;&gt;&lt;% for (var i=0; i&lt;datasets.length; i++){%&gt;&lt;li&gt;&lt;span style=\&quot;background-color:&lt;%=datasets[i].strokeColor%&gt;\&quot;&gt;&lt;/span&gt;&lt;%if(datasets[i].label){%&gt;&lt;%=datasets[i].label%&gt;&lt;%}%&gt;&lt;/li&gt;&lt;%}%&gt;&lt;/ul&gt;&quot;
  
  };
  </code></pre>
  <p><b>Creating the Chart:</b></p>
  <pre><code>var serverUsage = document.getElementById('server-usage').getContext('2d');
  new Chart(serverUsage).Line(usageData, options);
  </code></pre>
  <p>I found a pretty similar question after searching for the Question-Tag chart.js, but it didn't work too good, since the solution is buggy when hovering and it's not a Line-Chart. (<a href="https://stackoverflow.com/questions/30697292/chart-js-spacing-and-padding">Chart.JS spacing and padding</a>)</p>