Hey there! I’ve dealt with this exact frustration in Chart.js before—nothing’s more annoying than having sparse grid lines when you start with limited data, only for them to snap into place once you add more points. Let’s get your time-axis grid lines consistent from the get-go.

Here’s the step-by-step fix: #

The key is to explicitly define your time interval, force all ticks to render, and lock in grid line styling in the X-axis configuration.

Full Code Example

// 假设你已经获取了时间标签和数据点
const timeLabels = ['2024-05-20 09:00', '2024-05-20 09:10', '2024-05-20 09:20'];
const financialData = [150, 152, 148];

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: timeLabels,
    datasets: [{
      label: '实时行情',
      data: financialData,
      borderColor: '#2196F3',
      tension: 0.1,
      fill: false
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        // 核心：固定时间间隔配置
        time: {
          unit: 'minute', // 基础时间单位
          stepSize: 10, // 每10分钟显示一个刻度/网格线
          minUnit: 'minute', // 确保不会自动降级到更小单位
          displayFormats: {
            minute: 'HH:mm' // 自定义时间显示格式，按需调整
          }
        },
        // 强制显示所有刻度，避免自动跳过
        ticks: {
          autoSkip: false,
          maxRotation: 0, // 可选：防止标签旋转，保持整洁
          minRotation: 0
        },
        // 统一网格线样式
        grid: {
          lineWidth: 1, // 设置固定的网格线宽度
          offset: false, // 确保网格线与刻度严格对齐
          drawBorder: true // 可选：绘制X轴边框
        }
      },
      y: {
        grid: {
          lineWidth: 1 // 可以同步Y轴网格线宽度，保持视觉统一
        }
      }
    }
  }
});

Key Configuration Breakdown #

• time.unit + stepSize: This locks in your desired interval (e.g., 10 minutes per tick). No matter how much data you have initially, Chart.js will generate ticks at this fixed spacing.
• ticks.autoSkip: false: Disables Chart.js’s default behavior of skipping ticks when space is tight. This ensures every interval gets a corresponding grid line.
• grid.lineWidth: Sets a consistent pixel width for all grid lines, eliminating any variation as data grows.
• grid.offset: false: Aligns grid lines perfectly with tick marks, so spacing looks uniform across the chart.

Quick Note on Time Adapters #

If you’re using Chart.js v3 or later, make sure you’ve included a time adapter (like chartjs-adapter-date-fns or chartjs-adapter-moment) in your project—this lets Chart.js properly parse and handle time-based labels.

That should do it! Your grid lines will stay consistent from the first data point to the hundredth.

内容的提问来源于stack exchange，提问作者kmm2908