<table id="stacked-example-3" class="charts-css column hide-data show-heading show-labels show-primary-axis show-3-secondary-axes data-spacing-10 multiple stacked">
	<caption> サンプル </caption>
	<thead>
		<tr>
			<th scope="col"> Continent </th>
			<th scope="col"> #1 </th>
			<th scope="col"> #2 </th>
			<th scope="col"> #3 </th>
			<th scope="col"> #4 </th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row"> アメリカ </th>
			<td style="--size:calc(50 / 150);"><span class="data"> 50$ </span></td>
			<td style="--size:calc(50 / 150);"><span class="data"> 50$ </span></td>
			<td style="--size:calc(30 / 150);"><span class="data"> 30$ </span></td>
			<td style="--size:calc(20 / 150);"><span class="data"> 20$ </span></td>
		</tr>
		<tr>
			<th scope="row"> アジア </th>
			<td style="--size:calc(30 / 150);"><span class="data"> 30$ </span></td>
			<td style="--size:calc(30 / 150);"><span class="data"> 30$ </span></td>
			<td style="--size:calc(30 / 150);"><span class="data"> 30$ </span></td>
			<td style="--size:calc(30 / 150);"><span class="data"> 30$ </span></td>
		</tr>
		<tr>
			<th scope="row"> 欧州 </th>
			<td style="--size:calc(40 / 150);"><span class="data"> 40$ </span></td>
			<td style="--size:calc(25 / 150);"><span class="data"> 25$ </span></td>
			<td style="--size:calc(45 / 150);"><span class="data"> 45$ </span></td>
			<td style="--size:calc(30 / 150);"><span class="data"> 30$ </span></td>
		</tr>
		<tr>
			<th scope="row"> アフリカ </th>
			<td style="--size:calc(20 / 150);"><span class="data"> 20$ </span></td>
			<td style="--size:calc(20 / 150);"><span class="data"> 20$ </span></td>
			<td style="--size:calc(20 / 150);"><span class="data"> 20$ </span></td>
			<td style="--size:calc(20 / 150);"><span class="data"> 20$ </span></td>
		</tr>
	</tbody>
</table>

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

#stacked-example-3 {
	height: 300px;
	max-width: 300px;
	margin: 0 auto;
	--heading-size: 2.5rem;
	--color-1: rgba(255, 200, 0, 0.6);
	--color-2: rgba(255, 150, 0, 0.6);
	--color-3: rgba(255, 75, 0, 0.6);
	--color-4: rgba(255, 0, 0, 0.6);
}
#stacked-example-3 caption {
	font-weight: bold;
}

External CSS

  1. https://unpkg.com/charts.css/dist/charts.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.