Charts.js：如何去除条形图中的垂直黑线

问题描述

如何去除条形图中条形两侧显示的垂直黑线？

我都试过了

 options : {
scaleShowVerticalLines: false
}

options : {
    scales : {
        xAxes : [ {
            gridLines : {
                display : false
            }
        } ]
    }
}

这是我的代码行：

//Chart Axis's


let scales = {
    xAxes: [{
        gridLines: { display: false },ticks: {
            font: {
                size: config.size,},color: "white",}],yAxes: [{
        ticks: {
            beginAtZero:true
        },}]
};



 let ctx = document.getElementById('how_i_spend_canvas');
        if (ctx) { // DOM element is present and not null
            let categoriesChart = new Chart(ctx.getContext('2d'),{
                type: 'bar',data: howISpendChartdata,// Chart pulgins & Options
                plugins: [ChartDataLabels],options: {
                    scales: scales,responsive: true,maintainAspectRatio: false,aspectRatio: 2,plugins: plugins,}
}
                onClick: function (evt,element) {}

但我对我不起作用。

参考箭头指向线条的位置。

解决方法

现在得到了答案，就像在 Chart JS 3 中一样，它们已更改为 grid 而不是常见的 gridlines 命令。

现在在图表 JS 3 中可以使用：

x: {
     grid:{
           color:'red',display: false,}
  },y:{
      ticks: {
      beginAtZero: true
    },grid: {
        color: 'green',display: true,}
  }

Result ScreenShot