Highcharts移除grid lines：如何隐藏axis/ticks仅显示stacked bar graph

Absolutely! You can easily strip down Highcharts to only show your stacked bar graph by disabling all those extra UI elements you mentioned. Let me walk you through exactly how to do this:

Key Configuration Tweaks #

• Hide both axes entirely: Disable the full X and Y axis components, including labels and ticks
• Turn off all grid lines: Disable horizontal and vertical grid lines for a clean look
• Remove extra borders/spacing: Eliminate unnecessary whitespace and borders around the chart area
• Clean up bar styling: Remove bar borders and adjust padding to make segments fit seamlessly

Full Working Code Example #

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    // Remove chart border and zero out all spacing/margins
    borderWidth: 0,
    spacing: [0, 0, 0, 0],
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0
  },
  title: {
    text: null // Hide default title if you don't need it
  },
  xAxis: {
    visible: false, // Disable entire X axis
    gridLineWidth: 0 // Double-check no grid lines from X axis
  },
  yAxis: {
    visible: false, // Disable entire Y axis
    gridLineWidth: 0 // Double-check no grid lines from Y axis
  },
  legend: {
    enabled: false // Disable legend unless you need it to label stacked segments
  },
  plotOptions: {
    bar: {
      stacking: 'normal',
      borderWidth: 0, // Remove bar borders for a smoother appearance
      groupPadding: 0,
      pointPadding: 0
    }
  },
  // Replace with your actual stacked data
  series: [{
    name: 'Segment 1',
    data: [45]
  }, {
    name: 'Segment 2',
    data: [30]
  }, {
    name: 'Segment 3',
    data: [25]
  }]
});

Quick Extra Tips #

• If you want to keep the legend to identify stacked parts, just set legend.enabled: true and adjust its position with properties like legend.align or legend.verticalAlign.
• Tweak the spacing and margin values in the chart object if you still see leftover whitespace around your bars.
• Hover tooltips are enabled by default—if you want to keep them, no extra config is needed; if you want to remove them, add tooltip: { enabled: false } to the main config.

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