How to Hide Border Lines From Scales in Chart JS 4

Let’s explore how to hide the border lines from the x and y scales.

Step 1: Get Chart.js 4

First, make sure you have Chart.js 4 in your project. You can either download it or include it from a website (like a library). Just make sure it’s there in your project.

Get the boiler template at: Getting Started with Chart JS

Step 2: Make a Simple Chart

Now, create a basic chart using Chart.js. Think of it like setting up a canvas where your chart will be drawn. You decide what kind of chart it is (like a line chart) and what data it shows.

Step 3: Hide Border Lines

Now, if you want to make your chart look cleaner by removing the lines on the sides (like borders), you can do that. We’ll hide the lines on the bottom (x-axis) and the side (y-axis).

const options = {
  scales: {
    x: {
      display: true,
      grid: {
        display: false, // Hide x-axis lines
        drawOnChartArea: false // removes the grid
        drawTicks: false // removes the tick marks
      },
      border: {
        display: false // remove border lines
      }
    },
    y: {
      display: true,
      grid: {
        display: false, // Hide y-axis lines
        drawOnChartArea: false // removes the grid
        drawTicks: false // removes the tick marks
      },
      border: {
        display: false // remove border lines
      }
    },
  },
};

Here, we’re remove all the possible lines that exist from scale. In total there are 3 lines on both the x and y scales:

1. grid lines
2. tick marks
3. border lines

Conclusion

Customizing your charts can make them look better for your website or app. Hiding those lines on the sides is one way to do it. Just follow these steps, and you’ll have a clean and nice-looking chart on your web page!