CODEWITHSUNDEEP
chart.js
user626920
user626920

Reputation: 55

In Chart.js 3.8 (latest release) how to show labels on axis

in Chart.js 3.0 I want to show up the title of x axis.

By reading the documentation at this link https://www.chartjs.org/docs/latest/axes/labelling.html I added this code to the options

     options: {
         scales: {
         x: {
                 display: true,
                 text: 'Price',
                 color: 'rgb (12, 70, 14)',
             }
         }
     }

but the labels are not seen, this is the complete code:

   <html>
<head>
</head>
<body>

<canvas id="myChart" width="400" height="400"></canvas>

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

const labels = [
    '1740.00',
    '1750.00',
    '1760.00',

  ];

  const data = {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(12, 70, 14)',
      borderColor: 'rgb(12, 70, 14)',
      data: [444000, 790000, 1550000],
    }]
  };

  const config = {
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                display: true,
                text: 'Price',
                color: 'rgb(12, 70, 14)',
            }
        }
    }
  };

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

</body>
</html>

Upvotes: 0

Views: 248

Answers (1)

user626920
user626920

Reputation: 55

i found the solution by myself :)

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

Upvotes: 0

Related Questions