Altering the appearance of the xy axis on a line chart in Chart.js version 4 by either removing it entirely or adjusting its color

Question

Altering the appearance of the xy axis on a line chart in Chart.js version 4 by either removing it entirely or adjusting its color

I am facing an issue with my chart.js code where I am trying to remove both the axis lines from the graph but still display the grids (NOTE)

` const MAINCHARTCANVAS = document.querySelector(".main-chart")

new Chart(MAINCHARTCANVAS, { type: 'line', data: { labels: ["Mon" , "Tue" , "Wed" , "Thu" , "Fri" , "Sat" , "Sun"], datasets: [{ label: 'My First Dataset', data: [7,5,7,7,8,7,4], borderColor: "#4F3422", tension: 0.4, borderWidth:7, borderSkipped: true, }] }, options: { scales: {

        x:{
            grid:{
                display:false,  
            },
            border:{
                didplay: false,
            }
        },

        y:{
            drawBorder: false, 
            beginAtZero: true,
            grid:{
                lineWidth:3,
                color:"#E8ddd9",
            },
            border: {
                display:false,
                dash: [10,16],
            },
            ticks: {display: false}
        }
    },

    plugins: {
        legend: false, // Hide legend
        tooltip:{
            enabled: false
        },
        backgroundCircle: false
    },
    responsive: true,
    maintainAspectRatio: false,
    elements: {
        point:{
            radius: 3
        }
    }
}

}) `

this my previous code I had tried

changing color or removing the axis enough for me

sample img for the reference

i am expecting like this

expected output

Try to change the color of it to transparent or try to remove it

javascript html css charts chart.js

Answer 1

Answer №1

It appears from your query that you are looking to remove the baseline on both axes.

To achieve this, simply include the following code in your options:

scales: {
      x: {
          display: false, // hiding the entire data of the x-axis
         },
      y: {
          display: false,
          }
 }

If you wish to customize grid lines, ticks, and the dash "-", which appears between ticks and the base border of the axis, you can use the following code:

grid: {
    color: 'rgba(100, 250, 132, 0.4)', // specifying grid lines color
    drawTicks: false, // removing the "-" marker between tick and base border
    drawOnChartArea: true, // borders within the chart area
},
ticks: {
    color: 'red', // defining tick color (set to "transparent" if you want to hide ticks)
    display: true, // set to false to hide tick labels (e.g., red, blue, etc.)
}

Hope this solution works for you. Thank you!

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1
      }]
  },
  options: {
      scales: {
          x: {
              display: false, // hiding the entire data of an axis
          },
          y: {
              display: false,
          }
      }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

Answer 2

It appears from your query that you are looking to remove the baseline on both axes.

To achieve this, simply include the following code in your options:

scales: {
      x: {
          display: false, // hiding the entire data of the x-axis
         },
      y: {
          display: false,
          }
 }

If you wish to customize grid lines, ticks, and the dash "-", which appears between ticks and the base border of the axis, you can use the following code:

grid: {
    color: 'rgba(100, 250, 132, 0.4)', // specifying grid lines color
    drawTicks: false, // removing the "-" marker between tick and base border
    drawOnChartArea: true, // borders within the chart area
},
ticks: {
    color: 'red', // defining tick color (set to "transparent" if you want to hide ticks)
    display: true, // set to false to hide tick labels (e.g., red, blue, etc.)
}

Hope this solution works for you. Thank you!

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1
      }]
  },
  options: {
      scales: {
          x: {
              display: false, // hiding the entire data of an axis
          },
          y: {
              display: false,
          }
      }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>

Altering the appearance of the xy axis on a line chart in Chart.js version 4 by either removing it entirely or adjusting its color

Answer №1

Similar questions

I'm currently in the process of incorporating horizontal scrolling into various sections of an image gallery. The images will stack vertically only when the window width

Using AJAX for redirection following a successful PHP post without any errors

Increase value of field in subdocument of Mongoose if it already exists, otherwise create a new subdocument

Sorting items using jQuery filter

What is the process for incorporating an additional input in HTML as you write?

How to extract text from a <div> element using Selenium

What's the best way to determine the background image on this website? I'm in the process of replicating a site on

The CSS modifications are only visible in my browser after I delete the browsing data

When attempting to utilize nsIPrefBranch in a Firefox extension to save data, an unexpected error of NS_ERROR_UNEXPECTED occurs

PubNub's integration of WebRTC technology allows for seamless video streaming capabilities

How to update data in AngularJS grid component using ng-bind directive

`Multiple Autocomplete feature that allows rendering of previously selected items`

The ideal way to markup a calendar: including a list of times, day containers, and events

Arrange the data in the table to ensure that it is organized neatly into the appropriate columns

The error message indicates a validation issue with the img tag: The attribute src has an invalid value, as it uses a backslash () as a path segment delimiter instead of

Total number of requests made since the previous reset

An observer is handed to me when I receive an array as a parameter

Every fourth list item, beginning with a designated number

Get started with the free plan for sails.js on Paas

Guide on resolving issues with Chart.js doughnut chart not displaying background colors or labels properly while utilizing props