在HighCharts中自定义X轴特定动态范围（参考官方Demo）

Alright, I’ve got you covered here. The issue you’re facing is that Highcharts is auto-generating the X-axis range based on your data’s start point, but you want to force it to use that specific custom hour range (including the wrap-around from 23 to 00 to 04). Here’s exactly how to fix this:

1. Use xAxis.categories to Define Your Exact Range #

The simplest and most direct way to lock your X-axis to that specific list of hours is to explicitly set the categories property in your X-axis configuration. This tells Highcharts to ignore auto-generated ticks and use your predefined list instead.

Here’s a code example to implement this:

Highcharts.chart('your-chart-container', {
  xAxis: {
    // Paste your custom hour range directly here
    categories: ["04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","00","01","02","03","04"],
    // Optional: Force every category to show a tick (prevents auto-hiding)
    tickInterval: 1,
    // Optional: Adjust label styling if needed to avoid overlap
    labels: {
      step: 1,
      rotation: 45 // Rotate labels if they’re too cramped
    }
  },
  series: [{
    // Make sure your data aligns with the categories
    // You can either use the category index (0 = "04", 1 = "05", etc.) or the category string as the x-value
    data: [
      { x: 0, y: 10 }, // Matches "04"
      { x: 1, y: 15 }, // Matches "05"
      // ... continue for all your data points
      { x: 24, y: 8 }  // Matches the final "04"
    ]
  }]
});

2. Align Your Data with the Categories #

If your existing data uses numeric hour values (like 4 instead of "04"), you’ll need to map those to the correct index in your categories array. For example:

• Numeric hour 4 → index 0 (first category)
• Numeric hour 0 → index 20
• Numeric hour 3 → index 23

Alternatively, you can update your data points to use the category string directly as the x value (e.g., { x: "04", y: 10 }), which Highcharts will automatically match to the corresponding category.

3. Prevent Auto-Scaling (If Needed) #

If you notice Highcharts still trimming some categories, add the min and max properties to the X-axis to lock the visible range to your full list:

xAxis: {
  categories: ["04","05",...,"04"],
  min: 0, // Start at the first category
  max: 24, // End at the last category
  tickInterval: 1
}

This approach gives you full control over exactly what appears on your X-axis, bypassing Highcharts’ automatic range calculation entirely.

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