chartjs / chartjs/Chart.js

Height bug in Docker

Open
#11,641 1 comment 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Expected behavior

Equal height in local environment(windows 10) and in docker environment(stable-alpine), for this element:
``

### Current behavior

The build in local environment(windows 10), **height = 400px**
![Build local](https://github.com/chartjs/Chart.js/assets/15181141/4c61553a-9f27-4901-bda9-387f1c761289)
The build in docker, **height = 869px**
![build docker](https://github.com/chartjs/Chart.js/assets/15181141/671eff68-e8a1-4d10-8e19-fad17769d518)

### 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](https://q5vzkk.csb.app/)

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

### Possible solution

```js
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 .

```js
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](https://www.npmjs.com/package/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_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.