How to add a vertical line on the end of the chart.js scatter graph

Question

This is how options for my chart look like

options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [
        {
          type: "time",
          gridLines: {
            display: false
          },
          ticks: {
            padding: 15
          }
        }
      ],
      yAxes: [
        {
          ticks: {
            padding: 22,
            min: 1,
            max: 5,
            stepSize: 1
          },
          position: "left",
          gridLines: {
            drawTicks: false
          }
        }
      ]
    }
  }

as you can see there is an option

gridLines: {
            display: false
          },

because of this there is no vertical lines on the chart.

What I want to do is to add only one vertical line on the end of the chart(right side of the chart) Here is my live example https://codesandbox.io/s/line-chart-with-vanilla-js-and-chartjs-pi9fn?file=/src/index.js

Answer 1

This can be solved as follows:

Define data.labels in the chart configuration. Given your data, this could be done by extracting the x values of of the data objects using Array.map().

const labels = data.map(o => o.x);

Then you need to adapt xAxis.ticks in order to instruct Chart.js that ticks (including grid lines) have to be generated from user given labels (see Tick Source from Chart.js documentation).

ticks: {
  source: 'labels'            
}

Further you have to change the definition of xAxis.gridLines. Make them displayed again and define lineWidth instead. This should be an array of numbers that specify the stroke width of individual grid lines. Basically all 0 except 1 for the last number.

gridLines: {
  lineWidth: labels.map((l, i) => i < labels.length - 1 ? 0 : 1)
}

Please have a look at the runnable code snippet below.

const data = [
  { x: "1-01", y: 1 },
  { x: "1-07", y: 3 },
  { x: "1-14", y: 2 },
  { x: "1-21", y: 4 },
  { x: "1-28", y: 5 },
  { x: "2-04", y: 1 }
];
const labels = data.map(o => o.x);

new Chart('line-chart', {
  type: "scatter",
  responsive: true,
  maintainAspectRatio: false,
  data: {
    labels: labels,
    datasets: [
      {
        data: data,
        label: "A",
        showLine: true,
        fill: false,
        borderWidth: 4,
        pointRadius: 5,
        tension: 0,
        backgroundColor: "#ffffff",
        borderColor: "red"
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [
        {
          type: 'time',
          unit: 'day',
          time: {
            parser: 'M-D'
          },
          gridLines: {
            lineWidth: labels.map((l, i) => i < labels.length - 1 ? 0 : 1)
          },
          ticks: {
            source: 'labels',
            padding: 15            
          }
        }
      ],
      yAxes: [
        {
          ticks: {
            padding: 22,
            min: 1,
            max: 5,
            stepSize: 1
          },
          position: "left",
          gridLines: {
            drawTicks: false
          }
        }
      ]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="line-chart" height="90"></canvas>