Чтобы задать фиксированные размеры для графиков в ApexCharts, вы можете использовать CSS для установки ширины и высоты контейнеров графиков. Вот шаги, которые помогут вам сделать это:
1. **Установите фиксированные размеры для контейнеров**: Вам нужно задать ширину и высоту для элементов, в которых находятся графики. Например:
```html
<div id="chart1" style="width: 500px; height: 300px;"></div>
<div id="chart2" style="width: 500px; height: 300px;"></div>
```
2. **Создайте графики в Javascript**: После того, как вы задали размеры контейнеров, вы можете инициализировать графики ApexCharts, как обычно.
```javascript
var options1 = {
chart: {
type: 'line',
height: 300,
width: 500,
},
series: [{
name: 'Data 1',
data: [10, 20, 30, 40]
}]
};
var chart1 = new ApexCharts(document.querySelector("#chart1"), options1);
chart1.render();
var options2 = {
chart: {
type: 'bar',
height: 300,
width: 500,
},
series: [{
name: 'Data 2',
data: [5, 15, 25, 35, 45]
}]
};
var chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
chart2.render();
```
3. **Используйте CSS для дополнительного контроля**: Если вам нужно еще больше контроля над стилями, вы можете использовать CSS-класс для контейнеров:
```css
.chart-container {
width: 500px;
height: 300px;
}
```
И примените этот класс к вашим контейнерам:
```html
<div id="chart1" class="chart-container"></div>
<div id="chart2" class="chart-container"></div>
```
Таким образом, вы обеспечите одинаковые размеры для всех графиков, что сделает их визуально согласованными.