How to plot a line chart which has both the start and points outside the canvas area using Chart.js

Question

I am currently using chart.js "2.9.4" and the "react-chartjs-2 "2.11.1". My goal is to draw a line chart which has only two data points. Both these two data points are outside the canvas.

Here I attached a reference image.

Please help me to find a solution for this issue. Your help will be highly appreciated.

score 1 · Accepted Answer · answered Feb 03 '22 at 15:20

You can use a scatter chart and define ticks.min and ticks.max options on the x-axis to limit the view. In order to see the line, you need to add showLine: true on the dataset.

Consult the Chart.js documentation for further details about tick configuration.

Please take a look at the runnable code snippet below and see how it works.

new Chart('chart', {
  type: 'scatter',
  data: {
    labels: [2018, 2024],
    datasets: [{
      data: [{ x: 2018, y: 10 }, { x: 2024, y: 0 }],
      borderColor: 'rgb(0, 0, 255)',
      showLine: true,
      fill: false
    }],
  },
  options: {
    responsive: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          min: 2020,
          max: 2023,
          stepSize: 1
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" width="300" height="200"></canvas>

Thanks @uminder, This is what I am exactly looking for. – Naveen Fernando Feb 03 '22 at 23:27 — Naveen Fernando, Feb 03 '22 at 23:27

How to plot a line chart which has both the start and points outside the canvas area using Chart.js

1 Answers1