In Stacked horizontal bar chart how to remove the vertical line in Chart.js?

Question

I am unable to find the solution to remove the line in graph area for Stacked horizontal bar chart! , below mocke up show the details where i need the x and y axis line need to be shown but currently the when i set the gridLabel:{display:none} every vertical lines are removed

  scales: { xAxes: [ { ticks: { beginAtZero: true, fontFamily: "'Open Sans Bold', sans-serif", fontSize: 11 }, scaleLabel: { display: false }, gridLines: { display: false, }, ticks: { fontFamily: "'Open Sans Bold', sans-serif", fontSize: 11 }, stacked: true } ], yAxes: [ { gridLines: { display: false, color: "#fff", zeroLineColor: "#fff", zeroLineWidth: 0 }, ticks: { fontFamily: "'Open Sans Bold', sans-serif", fontSize: 11 }, stacked: true } ] }, 

codepen link: code link

Answer 1

Set the following properties for x-axis grid-lines :

drawOnChartArea: false,
color: "black",
zeroLineColor: "black"

also, change the color for y-axis grid-lines :

color: "black"

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

 var barOptions_stacked = { tooltips: { enabled: false }, hover: { animationDuration: 0 }, scales: { xAxes: [ { ticks: { beginAtZero: true, fontFamily: "'Open Sans Bold', sans-serif", fontSize: 11 }, scaleLabel: { display: false }, gridLines: { drawOnChartArea: false, color: "black", zeroLineColor: "black" }, stacked: true } ], yAxes: [ { gridLines: { display: false, color: "black", zeroLineColor: "#fff", zeroLineWidth: 0 }, ticks: { fontFamily: "'Open Sans Bold', sans-serif", fontSize: 11 }, stacked: true } ] }, legend: { display: false }, animation: { onComplete: function() { var chartInstance = this.chart; var ctx = chartInstance.ctx; ctx.textAlign = "left"; ctx.font = "9px Open Sans"; ctx.fillStyle = "#fff"; Chart.helpers.each( this.data.datasets.forEach(function(dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); Chart.helpers.each( meta.data.forEach(function(bar, index) { data = dataset.data[index]; if (i == 0) { ctx.fillText(data, 50, bar._model.y + 4); } else { ctx.fillText(data, bar._model.x - 25, bar._model.y + 4); } }), this ); }), this ); } }, pointLabelFontFamily: "Quadon Extra Bold", scaleFontFamily: "Quadon Extra Bold" }; var ctx = document.getElementById("Chart1"); var myChart = new Chart(ctx, { type: "horizontalBar", data: { labels: ["82", " 81 ", "2", " 42", "4"], datasets: [ { data: [727, 589, 537, 543, 20], backgroundColor: "#5f8a58", hoverBackgroundColor: "rgba(50,90,100,1)" }, { data: [238, 553, 746, 884, 122], backgroundColor: "#3f7faa", hoverBackgroundColor: "rgba(140,85,100,1)" }, { data: [100, 100, 100, 100, 100], backgroundColor: "#000", hoverBackgroundColor: "rgba(140,85,100,1)" } ] }, options: barOptions_stacked }); 

 .graph_container { display: block; width: 500px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script> <div class="graph_container"> <canvas id="Chart1"></canvas> </div>