javascript - How to add padding between Graph and X/Y-Scale in chart.js? -
i've got simple line-chart using chart.js.
it should this: http://fs1.directupload.net/images/150819/ktkgs9pw.jpg (photoshop, marked paddings red lines)
what looks @ moment chart.js: http://fs2.directupload.net/images/150819/ql5l3jez.png
as can see, outline of graph-points overlaps x-scale @ bottom, "2:00 pm" example , y-scale on left, "0" example.
my line-chart-code:
html:
<canvas id="server-usage"></canvas> global chartsettings:
chart.defaults.global = { // boolean - whether animate 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 should show scale @ showscale: true, // boolean - if want override hard coded scale scaleoverride: true, // ** required if scaleoverride true ** // number - number of steps in hard coded scale scalesteps: 7, // number - value jump in hard coded scale scalestepwidth: 18, // number - scale starting value scalestartvalue: 0, // string - colour of scale line scalelinecolor: "#565a60", // number - pixel width of scale line scalelinewidth: 0.1, // boolean - whether show labels on scale scaleshowlabels: true, // interpolated js string - can access value scalelabel: "<%=value%>", // boolean - whether scale should stick integers, not floats if drawing space there scaleintegersonly: true, // boolean - whether scale should start @ zero, or order of magnitude down lowest value scalebeginatzero: false, // string - scale label font declaration 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 chart should responsive , resize when browser does. responsive: true, // boolean - whether maintain starting aspect ratio or not when responsive, if set false, take entire container maintainaspectratio: false, // boolean - determines whether draw tooltips on canvas or not showtooltips: true, // function - determines whether execute customtooltips function instead of drawing built in tooltips (see [advanced - external tooltips](#advanced-usage-custom-tooltips)) customtooltips: false, // array - array of string names attach tooltip events tooltipevents: ["mousemove", "touchstart", "touchmove"], // string - tooltip background colour tooltipfillcolor: "#42454a", // string - tooltip label font declaration 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 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 caret on tooltip tooltipcaretsize: 8, // number - pixel radius of tooltip border tooltipcornerradius: 0, // number - pixel offset point x tooltip edge tooltipxoffset: 10, // string - template string single tooltips tooltiptemplate: "on <%if (label){%><%=label%> there <%}%><%= value %> active users", // string - template string multiple tooltips multitooltiptemplate: "<%= value %>", // function - fire on animation progression. onanimationprogress: function(){}, // function - 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 shown across chart scaleshowgridlines : false, //string - colour of grid lines scalegridlinecolor : "rgba(0,0,0,.05)", //number - width of grid lines scalegridlinewidth : 1, //boolean - whether show horizontal lines (except x axis) scaleshowhorizontallines: true, //boolean - whether show vertical lines (except y axis) scaleshowverticallines: true, //boolean - whether line curved between points beziercurve : false, //number - tension of bezier curve between points beziercurvetension : 0.4, //boolean - whether show dot 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 add radius cater hit detection outside drawn point pointhitdetectionradius : 20, //boolean - whether show stroke datasets datasetstroke : true, //number - pixel width of dataset stroke datasetstrokewidth : 4, //boolean - whether fill dataset colour datasetfill : false, //string - legend template legendtemplate : "<ul class=\"<%=name.tolowercase()%>-legend\"><% (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 chart:
var serverusage = document.getelementbyid('server-usage').getcontext('2d'); new chart(serverusage).line(usagedata, options); i found pretty similar question after searching question-tag chart.js, didn't work good, since solution buggy when hovering , it's not line-chart. (chart.js spacing , padding)
i hope provided enough information , can me that, since don't know javascript. thanks in advanced!
actually don't need complexity linked solution because
- you intend not show axes lines (i see image set chart background , scale color same) ,
- you've hardcoded scale start , end values (by assume know range of values data in , don't need autocalculated) - see alternative solution if condition doesn't hold you
with caveats, need make few changes (just ctrl + f on option name find line replace)
scalesteps: 5, // number - value jump in hard coded scale scalestepwidth: 50, // number - scale starting value scalestartvalue: -50, we're starting scale start value 1 step lower need. lifts graph. need hide scale label, with
scalelabel: function (d) { if (d.value < 0) return ''; else return d.value + ' '; }, the first line in method takes care of hiding scale label. + ' ' on last line moves graph right (we tell chart.js labels longer are)
fiddle - http://jsfiddle.net/56578cn4/
if 2. doesn't apply, remove scaleoverride , configuration , override common method calculates y axis scale range before initialize chart add 1 scale label above , 1 below
// applies chart instances use scale! var originalcalculatescalerange = chart.helpers.calculatescalerange; chart.helpers.calculatescalerange = function () { var scalerange = originalcalculatescalerange.apply(this, arguments); // add 1 unit @ top , bottom scalerange.min = scalerange.min - scalerange.stepvalue; scalerange.max = scalerange.max + scalerange.stepvalue; scalerange.steps = scalerange.steps + 2; return scalerange; } this work fine assuming don't mind labels when values above 0 (our scalelabel option takes care of hiding negative labels, , negative labels only).
note if using other charts don't want apply you'll need revert after done initializing chart.
fiddle - http://jsfiddle.net/mkzdzj3b/
Comments
Post a Comment