How to add padding between graph and X / Y scale in chart.js?

Question

I have 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 shims 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 graphic dots scheme overlaps the X-scale at the bottom, for example, “2:00 PM” and the Y-scale on the left, which is “0”, for example.

My Line-Chart-Code:

HTML:

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

Global settings:

 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 Parameters:

 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 a chart:

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

I found a pretty similar question after searching for Question-Tag chart.js, but it didn’t work too well, since the solution doesn’t work when it hangs, and this is not a Line-Chart. ( Interval and addition Chart.JS )

I hope I have provided enough information and someone can help me with this, as I really don't know anything about JavaScript. Thanks, advanced!

Answer 1

In fact, you don’t need all the complexity from a related solution, because

• You intend not to show the axis lines (I see in the image that you will set the background of the graph and the color of the scale the same) and
• You have already rigidly defined the initial and final scale values ​​(with which I assume that you know the range of values ​​in which your data will be located and do not need to be automatically calibrated) - see an alternative solution if this condition is not fulfilled for you

---

With these caveats, you just need to make a few changes (just Ctrl + F in the option name to find the replacement string)

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

Basically, we start the scale, starting with a value 1 step lower than we need. This raises the schedule. Now all we need to do is hide this extra scale mark we do with

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

The first line in the method will take care to hide the extra scale label. + ' ' on the last line moves the chart to the right (we tell Chart.js that the labels are longer than they really are)

---

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

---

---

If 2. not applicable, remove the scaleOverride and configuration and override the general method that calculates the y-axis scale range before initializing the chart to add one scale mark 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 if you don't mind extra shortcuts when the values ​​are all higher than 0 (our scaleLabel parameter takes care of hiding negative labels and only negative labels).

Note that if you use other charts where you do not want this to be applicable, you will need to undo this after the initialization of your chart is complete.

---

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