Highcharts：如何为Y轴上的每个条形图添加间距？

Hey there! Let's fix your Highstocks Y-axis spacing and scrollbar issues right away. Here's what you need to do:

1. Get the Y-axis scrollbar working #

The scrollbar won't activate unless the total height of your Y-axis categories exceeds the chart container's height. Here's how to fix that:

• Add a fixed height to your chart container using CSS. For example:

  #RoadmapGanttChart {
    height: 600px; /* Adjust this value based on your layout needs */
  }
  

  This forces the chart to stay within a set height, so when you have more categories than can fit, the scrollbar will show up and work as expected.

2. Increase spacing between Y-axis bars (categories) #

Your bars are cramped because the vertical space allocated to each category is too small. Let's adjust that:

• Tweak tickPixelInterval: This controls the pixel distance between each Y-axis tick (category). Increase the value from 200 to something larger like 300 (or more, depending on how much space you want):

  yAxis: {
    categories: categories,
    tickInterval: 1,
    tickPixelInterval: 300, // Larger value = more space between categories
    // ... rest of your yAxis config
  }
  

• Remove label padding: The paddingTop and paddingBottom in your labels.style only affect the label itself, not the category spacing. Remove those lines to avoid layout glitches:

  labels: {
    useHTML: true,
    style: {
      color: '#525151',
      font: '12px Helvetica',
      fontWeight: 'bold'
      // Removed paddingTop and paddingBottom here
    },
    // ... rest of labels config
  }
  

• Add axis padding (optional): If you want some extra space at the top and bottom of the Y-axis, uncomment and adjust minPadding and maxPadding:

  yAxis: {
    // ...
    minPadding: 0.1,
    maxPadding: 0.1,
    // ...
  }
  

Modified code snippet #

Here's your updated chart config with key fixes highlighted:

$scope.mychart = new Highcharts.Chart({
  chart: {
    renderTo: 'RoadmapGanttChart'
  },
  title: {
    text: 'RoadMaps'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    categories: categories,
    tickInterval: 1,
    tickPixelInterval: 300, // Increased for more vertical spacing
    labels: {
      useHTML: true,
      style: {
        color: '#525151',
        font: '12px Helvetica',
        fontWeight: 'bold'
        // Removed unnecessary padding styles
      }
    },
    startOnTick: false,
    endOnTick: false,
    title: {
      text: 'Projects',
      fontSize:'15px' // Fixed misplaced fontSize into title object
    },
    minPadding: 0.1,
    maxPadding: 0.1,
    scrollbar: {
      enabled: true
    }
  },
  legend: {
    enabled: false
  },
  tooltip: {
    formatter: function() {
      return '<b>'+ $scope.filteredTasks[this.y].name + '</b><br/>' +
        Highcharts.dateFormat('%m-%d-%Y', this.point.options.from) + ' - ' +
        Highcharts.dateFormat('%m-%d-%Y', this.point.options.to);
    }
  },
  plotOptions: {
    line: {
      lineWidth: 10,
      marker: {
        enabled: false
      },
      dataLabels: {
        enabled: true,
        align: 'left',
        formatter: function() {
          return this.point.options && this.point.options.label;
        }
      }
    }
  },
  series: $scope.filteredTasks
});

Quick note: I fixed a small invalid config issue where fontSize:'15px' was outside the title object in your original code — that wouldn't have applied correctly, so I moved it inside the title block.

Final checks #

• Double-check that your CSS for the chart container is applied properly.
• Test with different tickPixelInterval values to find the spacing that works best for your project.

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