Chartjs-Chart.js: grid lines only on dataset points

by

0👍

✅

You can define afterBuildTicks callbacks on both axes. In there, you replace the axis ticks with your own ticks extracted from your data.

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

const data = [
  { x: -40, y: 34 }, 
  { x: -10, y: 45 },
  { x: 140, y: 45 }
];
myChart = new Chart('myChartChart', {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Dataset',
      data: data,
      fill: true,
      stepped: true,
    }]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        suggestedMin: -50,
        suggestedMax: 150,
        afterBuildTicks: axis => axis.ticks = data.map(v => ({ value: v.x })),
        ticks: {
          callback: v => v + ' °C'
        }
      },
      y: {
        suggestedMin: 32,
        suggestedMax: 46,
        afterBuildTicks: axis => axis.ticks = data.map(v => ({ value: v.y })),
        ticks: {
          callback: v => v + ' bar'
        }
      }
    },
    plugins: {
      legend: {
        display: false
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<canvas id="myChartChart"></canvas>

Leave a comment