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

Question

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

我都试过了

 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) {}

但是我没用.

参考箭头指向的位置。

Answer 1

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

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

x: {
     grid:{
           color:'red',
           display: false,
        }
  },
  

  y:{
      ticks: {
      beginAtZero: true
    },

  grid: {
        color: 'green',
        display: true,
    }
  }

Result ScreenShot

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

Charts.js : How to remove the Vertical Black lines in Bar Chart

javascript

charts

chart.js

chartjs-2.6.0