[Chartjs]-Chart.js remove border from x/y Axis

by

2👍

✅

I think you are using a fork of Chart.js and not the actual chart.js (since the current stable version doesn’t have horizontal bars)

In Chart.js, you can set the scale line color to a transparent value, like so

window.myBar = new Chart(ctx).HorizontalBar(topVideos, {
     scaleLineColor: "rgba(0,0,0,0)",
     ...

If the fork is from a version after this, the same options should work in your forked library as well.

2👍

options : {

        scales: {

                yAxes: [{
                gridLines: {
                    drawBorder: false,

                }
            }]
        }
    };

1👍

In Chart.js 3.5.1 there is a drawBorder property which accepts boolean value. If true, the border is drawn at the edge between the axis and the chart area.

options: {
  scales: {
      x: {
        ...
        grid: {
          drawBorder: false,
        },
      },
      y: {
        ...
        grid: {
          drawBorder: false,
        },
      },
  },
}

Leave a comment