<div>
<div class="row">
<div class="col-md-4">
<div id="chart-spark1">
<ReactApexChart options={state.options} series={state.series} type="area" height={160} />
</div>
</div>
<div class="col-md-4">
<div id="chart-spark2">
<ReactApexChart options={state.optionsSpark2} series={state.seriesSpark2} type="area" height={160} />
</div>
</div>
<div class="col-md-4">
<div id="chart-spark3">
<ReactApexChart options={state.optionsSpark3} series={state.seriesSpark3} type="area" height={160} />
</div>
</div>
</div>
<div class="row">
<table>
<thead>
<th>Total Value</th>
<th>Percentage of Portfolio</th>
<th>Last 10 days</th>
<th>Volume</th>
</thead>
<tbody>
<tr>
<td>$32,554</td>
<td>15%</td>
<td>
<div id="chart-1">
<ReactApexChart options={state.options1} series={state.series1} type="line" height={35} width={100} />
</div>
</td>
<td>
<div id="chart-5">
<ReactApexChart options={state.options5} series={state.series5} type="bar" height={35} width={100} />
</div>
</td>
</tr>
<tr>
<td>$23,533</td>
<td>7%</td>
<td>
<div id="chart-2">
<ReactApexChart options={state.options2} series={state.series2} type="line" height={35} width={100} />
</div>
</td>
<td>
<div id="chart-6">
<ReactApexChart options={state.options6} series={state.series6} type="bar" height={35} width={100} />
</div>
</td>
</tr>
<tr>
<td>$54,276</td>
<td>9%</td>
<td>
<div id="chart-3">
<ReactApexChart options={state.options3} series={state.series3} type="pie" height={40} width={40} />
</div>
</td>
<td>
<div id="chart-7">
<ReactApexChart options={state.options7} series={state.series7} type="radialBar" height={50} width={50} />
</div>
</td>
</tr>
<tr>
<td>$11,533</td>
<td>2%</td>
<td>
<div id="chart-4">
<ReactApexChart options={state.options4} series={state.series4} type="donut" height={40} width={40} />
</div>
</td>
<td>
<div id="chart-8">
<ReactApexChart options={state.options8} series={state.series8} type="radialBar" height={40} width={40} />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>