Height bug in Docker - Githubissues

Expected behavior

Equal height in local environment(windows 10) and in docker environment(stable-alpine), for this element: <canvas ref="chartCanvas" height="390px"></canvas>

Current behavior

The build in local environment(windows 10), height = 400px Build local The build in docker, height = 869px build docker

Reproducible sample

https://codesandbox.io/p/sandbox/vue-chart-3-chart-js-issue-template-forked-q5vzkk

Optional extra steps/info to reproduce

Surprisingly, but in reproducible sample the behavior charts are similar to Docker's when opening full-screen

Run docker: FROM nginx:stable-alpine as production-stage

Possible solution

const calculateCanvasHeight = () => {
  if (chartCanvas.value) {
    chartCanvas.value.setAttribute('height', '160px');
  }
};

onMounted(() => {
  calculateCanvasHeight();
});

But the height will be 365px, not 160px. But this brute force method will help you find the correct height

Context

I tried a simple canvas chart with random data and the height was the same everywhere else .

const chartData = ref(generateRandomData());
const chartOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    x: {
      type: 'category',
      position: 'bottom',
      title: {
        display: true,
        text: 'Month',
      },
    },
    y: {
      type: 'linear',
      position: 'left',
      title: {
        display: true,
        text: 'Sales',
      },
    },
  },
});

const myLineChart = ref(null);
const chartMill = ref();

const renderChart = () => {
  if (chartMill.value) chartMill.value.destroy();
  const ctx = myLineChart.value.getContext('2d');
  chartMill.value = new Chart(ctx, {
    type: 'line',
    data: chartData.value,
    options: chartOptions.value,
  });
};

onMounted(() => {
  renderChart();
});

// Function to generate random data for demonstration
function generateRandomData() {
  const labels = ['January', 'February', 'March', 'April', 'May'];
  const data = labels.map(() => Math.floor(Math.random() * 50));
  return {
    labels,
    datasets: [
      {
        label: 'Monthly Sales',
        borderColor: 'rgb(75, 192, 192)',
        data,
        fill: false,
      },
    ],
  };
}

// Watch for changes in chartData and update the chart
watch(chartData, () => {
  renderChart();
});

I thought chart.js without vue-chart-3 solved my problem. And that's why I gave up on vue-chart-3 But I was wrong

chart.js version

4.4.0

Browser name and version

Chrome 120.0.6099.200

Link to your project

No response

chartjs / Chart.js

Height bug in Docker #11641