How to make a 1D scatter plot with Charts.js?

Question

I'm trying to create a 1D scatter plot with Charts.js. This is the best I could do:

I like the visual effect of using "line" and rotating it 90 degrees. However, I wish the graph was smaller along the Y axis. I've already set display: false on the Y axis, and also limited its range from -0.1 to 0.1, so what more can I do?

Answer 1

Maybe setting the height on your canvas will solve the problem.

You could also use a horizontal stacked bar chart where each bar is defined as a floating bar inside its own dataset.

Please take a look at the following runnable sample and see how it works.

const data = [93.1, 93.4, 93.7, 95.7, 98.2, 103, 105.3, 106.1, 108.2];
const datasets = data.map(v => ({
  data: [[v - 0.03, v + 0.03]],
  backgroundColor: 'rgb(255, 99, 132)'
}));

new Chart('chart', {
  type: 'bar',
  data: {
    labels: [''],
    datasets: datasets
  },
  options: {
    indexAxis: 'y',
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        callbacks: {
          label: ctx => data[ctx.datasetIndex]
        }
      }
    },
    interaction: {
      mode: 'x',
    },
    scales: {
      y: {
        stacked: true
      },
      x: {
        max: 110,
        min: 93,
        reverse: true
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
<canvas id="chart" height="30"></canvas>