Всем привет, не могу никак найти решение данной проблемы. Ширина второго графика больше первого, а все из-за того что в data1 меньше данных чем в data2. Каким образом сделать так, чтобы ширина была одинаковая?
<td class="dailyGraphs1"></td>
<td class="dailyGraphs2"></td>
var data1 = [1];
var dates1 = ['01/01/2024'];
var data2 = [1, 2, 5, 2];
var dates2 = [
'01/01/2024', '02/01/2024', '03/01/2024', '04/01/2024'
];
var options1 = {
series: [{
data: data1,
name: "Series 1"
}],
chart: {
height: 220,
width: 220,
type: 'area',
toolbar: {
show: false
}
},
colors: ['#00E396'],
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
xaxis: {
type: 'category',
categories: dates1
},
tooltip: {
x: {
format: 'dd/MM/yy'
}
},
legend: {
show: false
},
};
var options2 = {
series: [{
data: data2,
name: "Series 2"
}],
chart: {
height: 220,
width: 220,
type: 'area',
toolbar: {
show: false
}
},
colors: ['#FF4560'],
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
xaxis: {
type: 'category',
categories: dates2
},
tooltip: {
x: {
format: 'dd/MM/yy'
}
},
legend: {
show: false
}
};
var chart1 = new ApexCharts(document.querySelector('.dailyGraphs1'), options1);
chart1.render();
var chart2 = new ApexCharts(document.querySelector('.dailyGraphs2'), options2);
chart2.render();
пробовал уже и использование plotOptions, толку нету.