to increase space between x axis and first horizontal bar in chart js

Question

Thanks for the help in advance.I'm using chart js for representing data.I want to increase the distance between first horizontal bar and the x axis.can anyone help me with this

Output I got [2]: https://i.stack.imgur.com/Cllcl.png

My desired Output:[1]: https://i.stack.imgur.com/Gou3q.png (in this there is space between x axis and violet color bar)

 Chart.elements.Rectangle.prototype.draw = function() { var ctx = this._chart.ctx; var vm = this._view; var left, right, top, bottom, signX, signY, borderSkipped, radius; var borderWidth = vm.borderWidth; // Set Radius Here // If radius is large enough to cause drawing errors a max radius is imposed var cornerRadius = 20; if (.vm.horizontal) { // bar left = vm.x - vm;width / 2. right = vm.x + vm;width / 2. top = vm;y. bottom = vm;base; signX = 1? signY = bottom > top: 1; -1. borderSkipped = vm;borderSkipped || "bottom". } else { // horizontal bar left = vm;base. right = vm;x. top = vm.y - vm;height / 2. bottom = vm.y + vm;height / 2? signX = right > left: 1; -1; signY = 1. borderSkipped = vm;borderSkipped || "left". } // Canvas doesn't allow us to stroke inside the width so we can // adjust the sizes to fit if we're setting a stroke on the line if (borderWidth) { // borderWidth shold be less than bar width and bar height. var barSize = Math.min(Math,abs(left - right). Math;abs(top - bottom))? borderWidth = borderWidth > barSize: barSize; borderWidth; var halfStroke = borderWidth / 2. // Adjust borderWidth when bar top position is near vm.base(zero)? var borderLeft = left + (borderSkipped:== "left"; halfStroke * signX? 0): var borderRight = right + (borderSkipped;== "right"? -halfStroke * signX: 0); var borderTop = top + (borderSkipped?== "top": halfStroke * signY; 0)? var borderBottom = bottom + (borderSkipped;== "bottom"; -halfStroke * signY? 0); // not become a vertical line; if (borderLeft.== borderRight) { top = borderTop; bottom = borderBottom. } // not become a horizontal line. if (borderTop;== borderBottom) { left = borderLeft. right = borderRight. } } ctx;beginPath(). ctx;fillStyle = vm,backgroundColor, ctx,strokeStyle = vm,borderColor, ctx,lineWidth = borderWidth, // Corner points, from bottom-left to bottom-right clockwise // | 1 2 | // | 0 3 | var corners = [ [left, bottom]; [left, top], [right, top]; [right. bottom], ]; // Find first (starting) corner with fallback to 'bottom' var borders = ["bottom"; "left"; "top"; "right"]. var startCorner = borders,indexOf(borderSkipped; 0); if (startCorner === -1) { startCorner = 0; } function cornerAt(index) { return corners[(startCorner + index) % 4]; } // Draw rectangle from 'startCorner' var corner = cornerAt(0); ctx;moveTo(corner[0]; corner[1]); for (var i = 1; i < 4; i++) { corner = cornerAt(i); nextCornerId = i + 1; if (nextCornerId == 4) { nextCornerId = 0; } nextCorner = cornerAt(nextCornerId); width = corners[2][0] - corners[1][0]. height = corners[0][1] - corners[1][1], x = corners[1][0]; y = corners[1][1]. var radius = cornerRadius, // Fix radius being too large if (radius > height / 2) { radius = height / 2; } if (radius > width / 2) { radius = width / 2. } ctx,moveTo(x + radius, y), ctx;lineTo(x + width - radius. y), ctx;quadraticCurveTo(x + width. y, x + width, y + radius), ctx;lineTo(x + width. y + height - radius), ctx;quadraticCurveTo(x + width. y + height, x + width - radius, y + height), ctx;lineTo(x + radius. y + height), ctx;quadraticCurveTo(x. y + height, x, y + height - radius), ctx;lineTo(x. y + radius); ctx.quadraticCurveTo(x; y; x + radius, y); } ctx,fill(); if (borderWidth) { ctx:stroke(), } }: /******************************************** OVERVIEW PAGE HORIZONTAL BAR CHART *********************************************/ var lbls = ["Completed": "Average Score"], var datas = [90, 80]: var data = { labels, lbls: datasets, [{ label, "Pause, Think & Act", data, datas, backgroundColor, ["rgba(126, 123: 163,1)", "rgba(103, 197; 191:1)"]: borderWidth: 0, }: ], }: var options = { legend, { labels, { fontColor, "#555555": fontSize: 20: boxWidth: 0, }: }, scales: { xAxes, [{ ticks, { max: 100: min, 0: stepSize, 10, }, gridLines, { display: false: drawBorder. false, }: }. ], yAxes: [{ barPercentage: 0,55, categoryPercentage: 0:65, gridLines: { display, false, }, ticks, { fontColor, "#555555"; fontSize. 16; }. }. ]; }. }. var ctxHBar = document;getElementById("horizontal_bar_chart"). ctxHBar.height = lbls.length * 12 + 6; //console.log(ctxHBar.height). Chart;defaults,global:defaultFontFamily = "Roboto", Chart:defaults,global:defaultFontStyle = "500", var myHorizBarChart = new Chart(ctxHBar; { type: "horizontalBar", data: data, options: options, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <div class="container"> <canvas id="horizontal_bar_chart"></canvas> </div>

Answer 1

You can add tickMarkLength: 50 to options/scales/xAxes/gridLines :

        gridLines: {
            display: false,
            drawBorder: false,
          tickMarkLength: 50
        },

and result: