How to Add Labels to the X,Y Axes with Chart.js

Chart.js helps add charts on the web easily, and steps to add labels to the X,Y axes with Chart.js are as follows:

  • Find Chart object.
  • Find "options" inside the Chart object.
  • Locate or add "scales" inside "options".
  • Then add labels to the X,Y axes.

Code Sample

<div>
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const labels = [
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
];

const data = {
  labels: labels,
  datasets: [{
    label: 'Data',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
};

const config = {
  type: 'line',
  data,
  options: {
     scales:{
           x:{
             	title:{
                    display:true,
                    text:"Month"
                      }
             },
           y:{
	     	title:{
                    display:true,
                    text:"unit"
                     }
	      }
       }
   }
};

var myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
</script>

Comments

Popular posts from this blog

How to Make A Reusable Image Slideshow HTML Component With Vanilla JavaScript

HTML Tags and Inline CSS that Work In Plotly.js Title

How to Type Spaces In HTML Input And Display In the Browser