How can I give values like below screenshot using Line Chart

by

👍:1

You could use a scatter as following:

const myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{x:0, y:0}, {x:0, y:10}, {x:2, y:10}, {x:2, y:0}],
     }]
   },
  options: {
    showLine: true
  }
 });

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{x:0, y:0}, {x:0, y:10}, {x:2, y:10}, {x:2, y:0}],
     }]
   },
  options: {
    showLine: true,
    scales: {
      y: {
        max: 20
      }
    }
  }
 });
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.1.1/dist/chart.umd.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"/>
    </div>
  </body>
</html>

Leave a comment