如何让Highcharts的X轴起始点对齐坐标原点(0,0)

云上老周

2026-6-30

Highcharts 首个数据点对齐坐标原点解决方案

问题说明

当前图表效果：

期望实现目标：将首个数据点的日期起始位置对齐坐标原点(0,0)，效果如下：
目标图表

原代码

HTML 代码

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

JS 代码

Highcharts.chart('container', {
  yAxis: {
    min: 0
  },
  xAxis: [
    {
      categories: ["01-23", "02-23", "03-23", "04-23"]
    }
  ],
  legend: {
    enabled: false
  },
  series: [
    {
      data: [10, 20, 30, 40]
    }
  ]
});

修改方案

只需对xAxis配置添加三个属性，即可实现首个数据点对齐原点：

startOnTick: true：强制坐标轴从第一个刻度位置开始渲染
minPadding: 0：移除坐标轴左侧的默认内边距
min: 0：指定坐标轴最小值为第一个分类的索引

修改后的 JS 代码

Highcharts.chart('container', {
  yAxis: {
    min: 0
  },
  xAxis: [
    {
      categories: ["01-23", "02-23", "03-23", "04-23"],
      startOnTick: true,
      minPadding: 0,
      min: 0
    }
  ],
  legend: {
    enabled: false
  },
  series: [
    {
      data: [10, 20, 30, 40]
    }
  ]
});