Height bug in Docker
- 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**

The build in docker, **height = 869px**

### 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.