I am facing an issue with aligning a table containing data and a chart visualizing this data using Chart.js. The chart is displayed in a "canvas" element and I can't seem to get them positioned next to each other.
I have tried implementing the following solutions:
- Using float:left property
- Placing both elements in the same div
- Applying column-count CSS property
Unfortunately, all of these attempts resulted in incorrect positioning. Float:left only partially aligns the graph with the table, placing them in the same div did not show any change, and column-count behaved similarly to float-left.
<script src="/Chart.js"></script>
<article>
<h2>my data</h2>
<table><caption>nice data</caption><thead>
<tr><th>some value</th><th>%</th><th>more values</th></tr></thead>
<tbody>
<tr><td>€ 100,00</td><td>17,59%</td><td>10 0 09 39 09 </td></tr>
<tr><td>€ 250,00</td><td>5,86%</td><td>0 79 7 35 5 </td></tr>
<tr><td>€ 10 000,00</td><td>5,48%</td><td>09 09 36 56 05 </td></tr>
<tr><td>€ 100 000,00</td><td>5,01%</td><td>79 35 85 94 03 </td></tr>
<tr><td>€ 107,50</td><td>4,11%</td><td>89 69 49 09 53 </td></tr>
<tr><td>€ 1 000,00</td><td>3,06%</td><td>28 06 15 51 20 </td></tr>
<tr><td>€ 2 500,00</td><td>2,79%</td><td>10 39 77 17 25 </td></tr>
</tbody></table>
<div style="height:80vh;"><canvas id="bedrag_perc"></canvas></div>
<script>
var ctx = document.getElementById("bedrag_perc");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: [100, 107, 250, 1000, 10000, 100000, 3.14],
datasets: [{
label: 'so much data',
data: ['17.59', '4.11', '5.86', '3.06', '5.48', '5.01', '41.11'],
}]
},
options: {
animation: { duration: 0 },
responsive: true,
maintainAspectRatio: false
}
});
</script>
</article>
I aim to have the graph aligned next to the table on wider screens and stacked vertically underneath if the screen size is small (responsive design).
Currently, only half of the chart is appearing next to the table.