How to add padding between Graph and X/Y-Scale in chart.js?

Question

I've got a simple Line-Chart using chart.js.

It should look something like this: http://fs1.directupload.net/images/150819/ktkgs9pw.jpg (Photoshop, I marked the paddings with red lines)

What it looks like at the moment with chart.js: http://fs2.directupload.net/images/150819/ql5l3jez.png

As you can see, the outline of the Graph-Points overlaps the X-Scale at the bottom, which is "2:00 PM" for example and the Y-Scale on the left, which is "0" for example.

My Line-Chart-Code:

HTML:

<canvas id="server-usage"></canvas>

Global Chartsettings:

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: "easeInOutQuart",

            // 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: "#565a60",

            // 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: "<%=value%>",

            // 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: "'Open Sans', sans-serif",

            // Number - Scale label font size in pixels
            scaleFontSize: 13,

            // String - Scale label font weight style
            scaleFontStyle: "500",

            // String - Scale label font colour
            scaleFontColor: "#7c8189",

            // 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: ["mousemove", "touchstart", "touchmove"],

            // String - Tooltip background colour
            tooltipFillColor: "#42454a",

            // String - Tooltip label font declaration for the scale label
            tooltipFontFamily: "'Open Sans', sans-serif",

            // Number - Tooltip label font size in pixels
            tooltipFontSize: 15,

            // String - Tooltip font weight style
            tooltipFontStyle: "normal",

            // String - Tooltip label font colour
            tooltipFontColor: "#e7e7e7",

            // String - Tooltip title font declaration for the scale label
            tooltipTitleFontFamily: "'Open Sans', sans-serif",

            // Number - Tooltip title font size in pixels
            tooltipTitleFontSize: 14,

            // String - Tooltip title font weight style
            tooltipTitleFontStyle: "regular",

            // String - Tooltip title font colour
            tooltipTitleFontColor: "#fff",

            // 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: "On <%if (label){%><%=label%> there were <%}%><%= value %> active users",

            // String - Template string for multiple tooltips
            multiTooltipTemplate: "<%= value %>",

            // Function - Will fire on animation progression.
            onAnimationProgress: function(){},

            // Function - Will fire on animation completion.
            onAnimationComplete: function(){}
}

Some Chart-Data:

var usageData = {
     labels : ["2:00 PM","4:00 PM","6:00 PM","8:00 PM","10:00 PM","0:00 AM","2:00 AM"],
     datasets : [
         {
               strokeColor : "#61666c",
               pointColor : "#4e82c9",
               pointStrokeColor : "#565a60",
               data : [0,120,120,100,60,40,0]
          }
     ]
}

Chart-Options:

var options = {

            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines : false,

            //String - Colour of the grid lines
            scaleGridLineColor : "rgba(0,0,0,.05)",

            //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 : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

};

Creating the Chart:

var serverUsage = document.getElementById('server-usage').getContext('2d');
new Chart(serverUsage).Line(usageData, options);

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. (Chart.JS spacing and padding)

I hope I provided enough information and somebody can help me with that, since I really don't know anything about JavaScript. Thanks in advanced!

Solution

Actually you don't need all the complexity from the linked solution because

1. You intend to not show the axes lines (I see from the image that you will set the chart background and the scale color to be the same) and
2. You've already hardcoded the scale start and end values (by which I assume you know the range of values your data will be in and don't need it autocalculated) - see the alternative solution if this condition doesn't hold for you

---

With those caveats, you just need to make a few changes (just Ctrl + F on the option name to find the line to replace)

scaleSteps: 5,
// Number - The value jump in the hard coded scale
scaleStepWidth: 50,
// Number - The scale starting value
scaleStartValue: -50,

We're basically starting the scale to start from a value 1 step lower than what we need. This lifts up the graph. Now all we need to do is hide this extra scale label, which we do with

scaleLabel: function (d) {
    if (d.value < 0)
        return '';
    else
        return d.value + '         ';
},

The first line in the method takes care of hiding the extra scale label. The + ' ' on the last line moves the graph to the right (we tell Chart.js that the labels are longer than they really are)

---

Fiddle - http://jsfiddle.net/56578cn4/

---

---

If 2. doesn't apply, remove the scaleOverride and configuration and override the common method that calculates the y axis scale range before you initialize the chart to add one scale label above and one below

// this applies to all chart instances that use this scale!
var originalCalculateScaleRange = Chart.helpers.calculateScaleRange;
Chart.helpers.calculateScaleRange = function () {
    var scaleRange = originalCalculateScaleRange.apply(this, arguments);
    // add 1 unit at the top and bottom
    scaleRange.min = scaleRange.min - scaleRange.stepValue;
    scaleRange.max = scaleRange.max + scaleRange.stepValue;
    scaleRange.steps = scaleRange.steps + 2;
    return scaleRange;
}

This will work fine assuming you don't mind the extra labels when the values are all above 0 (our scaleLabel option takes care of hiding negative labels, and negative labels only).

Note that if you are using other charts where you don't want this to apply you'll need to revert this after you are done initializing your chart.

---

Fiddle - http://jsfiddle.net/mkzdzj3b/