Highcharts X轴取消自动编号，固定显示5个轴值的技术需求

Got it, let's resolve this issue where your Highcharts X-axis keeps auto-generating extra labels when you have more data points than your specified categories. Here's how to lock the X-axis to always show your 5 fixed values, regardless of how many Y-axis data points you have:

Key Configurations to Add #

To achieve this, we need two critical settings in the xAxis object:

• tickPositions: [0, 1, 2, 3, 4]: This forces the X-axis to only render ticks (and their corresponding labels) at the indices of your 5 specified categories.
• ordinal: false: Disables Highcharts' default behavior of auto-extending the X-axis to match the number of data points. This lets your data points extend beyond the 5 categories without adding extra labels.

Modified Full Code #

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
#container { width: 500px; height: 300px; margin: 0 auto }
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<script type="text/javascript">
Highcharts.chart('container', {
    legend: { enabled: false },
    chart: { backgroundColor: 'white' },
    credits: { enabled: false },
    title: { text: '', style: { fontWeight: 'bold' } },
    xAxis: {
        lineColor: '#000000',
        categories: ['17 Dec', '24 Dec', '31 Dec', '7 Jan', '14 Jan'],
        labels: { style: { color: 'black' } },
        tickPositions: [0, 1, 2, 3, 4], // Force only these 5 ticks/labels
        ordinal: false // Prevent auto-extending X-axis for extra data points
    },
    yAxis: { gridLineColor: '#000000', title: { text: 'Weight (KG)' }, labels: { style: { color: 'black' } } },
    series: [{ name: 'Weight', data: [10, 40, 60, 30, 50, 20, 45, 41, 51, 53, 81, 70] }]
});
</script>
</body>
</html>

How It Works #

• With tickPositions set to the indices of your 5 categories, Highcharts will only draw labels for those exact positions, no matter how many data points you add to the series.
• ordinal: false ensures that even if your series has 3, 12, 20, or 30 data points, the X-axis won't automatically create new numbered labels for the extra data points. The data will still plot correctly against the X-axis scale, but only your 5 fixed labels will be visible.

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