Sparkline Chart

A Sparkline hides all the elements of the charts other than the primary paths. Helps to visualize data in small areas

Basic example

#	Name	Price	Change
1	Bitcoin BTC	$48,454.56	+22.23%

2	Ethereum BTC	$18,454.56	+27.23%

3	Bitcoin Cash BTC	$56,454.56	-12.23%

4	Litecoin BTC	$86,454.56	-12.23%

5	Bitcoin BTC	$18,454.56	+22.23%

6	Bitcoin BTC	$68,454.56	+22.23%

														
<div class="table-responsive">
<table class="table nowrap table-advance">
	<thead>
		<tr>
			<th>#</th>
			<th>Name</th>
			<th>Price</th>
			<th>Change</th>
			<th>Chart</th>
			<th>Trade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				1
			</td>
			<td>
				<div class="d-flex align-items-center">
					<div class="avatar avatar-icon avatar-xs avatar-soft-primary avatar-rounded me-2">
						<span class="initial-wrap">
							<i class="ri-bit-coin-line"></i>
						</span>
					</div>
					<div>Bitcoin</div>
					<div class="ps-3">BTC</div>
				</div>
			</td>
			<td>
				$48,454.56
			</td>
			<td>
				<span class="text-success">+22.23%</span>
			</td>
			<td>
				<div id="sparkline_chart_1"></div>
			</td>
			<td>
				<button class="btn btn-sm btn-success">Buy</button>
			</td>
		</tr>
		<tr class="table-row-gap"><td></td></tr>
		<tr>
			<td>
				2
			</td>
			<td>
				<div class="d-flex align-items-center">
					<div class="avatar avatar-icon avatar-xs avatar-soft-primary avatar-rounded me-2">
						<span class="initial-wrap">
							<i class="ri-money-pound-circle-line"></i>
						</span>
					</div>
					<div>Ethereum</div>
					<div class="ps-3">BTC</div>
				</div>
			</td>
			<td>
				$18,454.56
			</td>
			<td>
				<span class="text-success">+27.23%</span>
			</td>
			<td>
				<div id="sparkline_chart_2"></div>
			</td>
			<td>
				<button class="btn btn-sm btn-success">Buy</button>
			</td>
		</tr>
		<tr class="table-row-gap"><td></td></tr>
		<tr>
			<td>
				3
			</td>
			<td>
				<div class="d-flex align-items-center">
					<div class="avatar avatar-icon avatar-xs avatar-soft-primary avatar-rounded me-2">
						<span class="initial-wrap">
							<i class="ri-coin-line"></i>
						</span>
					</div>
					<div>Bitcoin Cash</div>
					<div class="ps-2">BTC</div>
				</div>
			</td>
			<td>
				$56,454.56
			</td>
			<td>
				<span class="text-danger">-12.23%</span>
			</td>
			<td>
				<div id="sparkline_chart_3"></div>
			</td>
			<td>
				<button class="btn btn-sm btn-success">Buy</button>
			</td>
		</tr>
		<tr class="table-row-gap"><td></td></tr>
		<tr>
			<td>
				4
			</td>
			<td>
				<div class="d-flex align-items-center">
					<div class="avatar avatar-icon avatar-xs avatar-soft-primary avatar-rounded me-2">
						<span class="initial-wrap">
							<i class="ri-coin-line"></i>
						</span>
					</div>
					<div>Litecoin</div>
					<div class="ps-2">BTC</div>
				</div>
			</td>
			<td>
				$86,454.56
			</td>
			<td>
				<span class="text-danger">-12.23%</span>
			</td>
			<td>
				<div id="sparkline_chart_4"></div>
			</td>
			<td>
				<button class="btn btn-sm btn-success">Buy</button>
			</td>
		</tr>
		<tr class="table-row-gap"><td></td></tr>
		<tr>
			<td>
				5
			</td>
			<td>
				<div class="d-flex align-items-center">
					<div class="avatar avatar-icon avatar-xs avatar-soft-primary avatar-rounded me-2">
						<span class="initial-wrap">
							<i class="ri-money-cny-circle-line"></i>
						</span>
					</div>
					<div>Bitcoin</div>
					<div class="ps-2">BTC</div>
				</div>
			</td>
			<td>
				$18,454.56
			</td>
			<td>
				<span class="text-success">+22.23%</span>
			</td>
			<td>
				<div id="sparkline_chart_5"></div>
			</td>
			<td>
				<button class="btn btn-sm btn-success">Buy</button>
			</td>
		</tr>
		<tr class="table-row-gap"><td></td></tr>
		<tr>
			<td>
				6
			</td>
			<td>
				<div class="d-flex align-items-center">
					<div class="avatar avatar-icon avatar-xs avatar-soft-primary avatar-rounded me-2">
						<span class="initial-wrap">
							<i class="ri-exchange-dollar-line"></i>
						</span>
					</div>
					<div>Bitcoin</div>
					<div class="ps-2">BTC</div>
				</div>
			</td>
			<td>
				$68,454.56
			</td>
			<td>
				<span class="text-success">+22.23%</span>
			</td>
			<td>
				<div id="sparkline_chart_6"></div>
			</td>
			<td>
				<button class="btn btn-sm btn-success">Buy</button>
			</td>
		</tr>
		<tr class="table-row-gap"><td></td></tr>
	</tbody>
</table>
</div>

														
<!-- Apex JS -->
<script src="vendors/apexcharts/dist/apexcharts.min.js"></script>
<script src="dist/js/sparkline-chart-init.js"></script>
/*Basic Chart*/
var optionsSpark1 = {
	series: [{
		data: randomizeArray(sparklineData)
	}],
	chart: {
		type: 'area',
		width: 100,
		height: 35,
		sparkline: {
			enabled: true
		},
	},
	stroke: {
		curve: 'straight'
	},
	fill: {
		opacity: 0.3
	},
	xaxis: {
		crosshairs: {
			width: 1
		},
	},
	yaxis: {
		min: 0
	},
	tooltip: {
		fixed: {
			enabled: false
		},
		x: {
			show: false
		},
		y: {
			title: {
				formatter: function (seriesName) {
					return ''
				}
			}
		},
		marker: {
			show: false
		}
	}
};

var chartSpark1 = new ApexCharts(document.querySelector("#sparkline_chart_1"), optionsSpark1);
chartSpark1.render();
/*Bar*/
var options2 = {
	series: [{
		data: [25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54]
	}],
	chart: {
		type: 'bar',
		width: 100,
		height: 35,
		sparkline: {
			enabled: true
		}
	},
	plotOptions: {
		bar: {
			columnWidth: '80%'
		}
	},
	labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
	xaxis: {
		crosshairs: {
			width: 1
		},
	},
	tooltip: {
		fixed: {
			enabled: false
		},
		x: {
			show: false
		},
		y: {
			title: {
				formatter: function (seriesName) {
					return ''
				}
			}
		},
		marker: {
			show: false
		}
	}
};

var chart2 = new ApexCharts(document.querySelector("#sparkline_chart_3"), options2);
chart2.render();

/*pie*/
var options3 = {
	series: [43, 32, 12, 9],
	chart: {
		type: 'pie',
		width: 40,
		height: 40,
		sparkline: {
			enabled: true
		}
	},
	stroke: {
		width: 1
	},
	tooltip: {
		fixed: {
			enabled: false
		},
	}
};

var chart3 = new ApexCharts(document.querySelector("#sparkline_chart_4"), options3);
chart3.render();

/*Donut*/
var options4 = {
	series: [43, 32, 12, 9],
	chart: {
		type: 'donut',
		width: 40,
		height: 40,
		sparkline: {
			enabled: true
		}
	},
	stroke: {
		width: 1
	},
	tooltip: {
		fixed: {
			enabled: false
		},
	}
};

var chart4 = new ApexCharts(document.querySelector("#sparkline_chart_5"), options4);
chart4.render();

/*Radial*/
var options5 = {
	series: [45],
	chart: {
		type: 'radialBar',
		width: 50,
		height: 50,
		sparkline: {
			enabled: true
		}
	},
	dataLabels: {
		enabled: false
	},
	plotOptions: {
		radialBar: {
			hollow: {
				margin: 0,
				size: '50%'
			},
			track: {
				margin: 0
			},
			dataLabels: {
				show: false
			}
		}
	}
};

var chart5 = new ApexCharts(document.querySelector("#sparkline_chart_6"), options5);
chart5.render();