Angular中调整PrimeNG p-chart图表高度的问题求助

I see you're having trouble adjusting the height of your PrimeNG p-chart component—directly setting width/height on the component tag isn't working, but modifying the chartjs-render-monitor class via dev tools does. Let's break down the solutions to fix this properly:

1. Target the Chart Canvas with Custom CSS #

Since you noticed the chartjs-render-monitor class controls the canvas size, we can apply custom styles to it with proper specificity (to avoid overriding other charts):

First, add a custom class to your p-chart component:

<p-chart 
  type="horizontalBar" 
  [data]="data" 
  [options]="options" 
  class="custom-small-horizontal-chart"
></p-chart>

Then add this CSS to your component's stylesheet (or global styles, if needed):

.custom-small-horizontal-chart .chartjs-render-monitor {
  height: 100px !important; /* Adjust to your desired height */
  width: 200px !important;  /* Adjust width as needed */
}

The !important ensures this overrides the default inline styles applied by Chart.js.

2. Use Responsive Configuration with Container Sizing #

PrimeNG's p-chart wraps Chart.js, which works best with responsive settings. Let's adjust your options and wrap the chart in a fixed-size container:

Update your Chart options: #

this.options = {
  legend: { display: false },
  responsive: true, // Enable responsiveness
  maintainAspectRatio: false, // Disable aspect ratio lock
  scales: {
    yAxes: [{
      display: true,
      barThickness: 5,
      gridLines: {
        display: true,
        offsetGridLines: false,
        drawBorder: true
      },
      ticks: {
        beginAtZero: true,
        stepSize: 10, // Adjust step size to match your data (28)
        max: 30 // Limit Y-axis to a sensible max for your data
      }
    }],
    xAxes: [{
      gridLines: {
        display: false,
        offsetGridLines: false,
        drawBorder: false
      },
      ticks: {
        beginAtZero: true,
        display: false,
        max: 100
      }
    }]
  }
};

Wrap the chart in a fixed-size container: #

<div style="height: 100px; width: 200px;">
  <p-chart 
    type="horizontalBar" 
    [data]="data" 
    [options]="options"
  ></p-chart>
</div>

With responsive: true and maintainAspectRatio: false, Chart.js will automatically resize to fit the container's dimensions.

Why Your Previous Attempts Didn't Work #

The width/height attributes on the <p-chart> tag don't directly map to the underlying canvas size when Chart.js is in non-responsive mode (responsive: false). Chart.js uses its own internal sizing logic in this case, ignoring the component's attributes. Modifying the chartjs-render-monitor class works because that's the actual canvas element rendered by Chart.js.

Bonus: Optimize Y-Axis for Your Data #

Your current Y-axis stepSize is set to 500, but your data point is only 28. This makes the Y-axis unnecessarily tall, which can make the chart feel larger than needed. Adjusting stepSize to 10 and max to 30 (as shown in the options above) will make the Y-axis fit your data better, reducing the overall chart height naturally.

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