Chart.js Vertically Aligned points on single x axis

Question

I have a bit of a unique chart.js issue here whereas I'm attempting to plot points on a linear chart on a single X axis only. For a visual reference, this chart would look like a vertical line with multiple Y values on a single X value. So far I cannot get the charts.js scipt to not automatically space values across the width of the chart at 100%, even with all X values declared at 0. I've got the sample data set with basic filler with a 0 X Value for each in the following.

<script>
    var chart = new Chart(linechart, {
        type: 'line',
        options: {
            scales: {
                xAxes: [{
                    gridLines: {
                    },
                    ticks: {
                        suggestedMin: 0,
                    },
                }],
                yAxes: [{
                    gridLines: {
                    },
                    ticks: {
                        suggestedMin: 0,
                        suggestedMax: 12,
                        stepSize: 0.5
                    },
                }]
            },
            legend: {
            }
        },
        data: {
            datasets: [{
                data: [{x: 0, y: 12}, {x: 0, y: 11}, {x: 0, y: 10}],
                pointBackgroundColor: "rgba(193,46,12,0.5)",
                pointBordercolor: "rgba(193,46,12,1)",
                pointRadius: 5,
                fill: true,
                showLine: false
            }]
        }
    });
</script>

Answer 1

The issue here is that the x-axis default type of a line chart is category. To turn this into linear, simply add type: 'linear' to the x-axis as follows:

options: {
  scales: {
    xAxes: [{
      type: 'linear',  
      ...

Please take a look at your amended code below and see how it works.

new Chart('myChart', {
  type: 'line',  
  data: {
    datasets: [{
      label: 'Dataset',
      data: [{ x: 0, y: 12 }, { x: 0, y: 11 }, { x: 0, y: 10 }],
      pointBackgroundColor: "rgba(193,46,12,0.5)",
      pointBordercolor: "rgba(193,46,12,1)",
      pointRadius: 5,
      fill: false,
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'linear',
        gridLines: {},
        ticks: {
          suggestedMin: 0,
        }
      }],
      yAxes: [{        
        gridLines: {},
        ticks: {
          suggestedMin: 0,
          suggestedMax: 12,
          stepSize: 0.5
        }
      }]
    }
  }
});

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