Get started with chartjs-plugin-hierarchical CDN
MIT licensed
ChartJS plugin: Hierarchical data rendering in bar, line, tree charts.
Tags:- chart.js
- hierarchical
- grouping
Stable version
Copied!
How to start using chartjs-plugin-hierarchical CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with chartjs-plugin-hierarchical CDN - cdnhub.io</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.cdnhub.io/chartjs-plugin-hierarchical/4.4.0/index.umd.min.js"></script>
<style>
#myChart {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div id="myChart"></div>
<script>
const labels = ['Category A', 'Category B', 'Category C', 'Subcategory 1', 'Subcategory 2'];
const data = {
labels,
datasets: [
{
label: 'Parent 1',
data: [12, 19, 3, 2, 5],
backgroundColor: 'rgba(255, 99, 122, 0.2)',
borderColor: 'rgba(255, 99, 122, 1)',
borderWidth: 1
},
{
label: 'Parent 2',
data: [7, 10, 12, 3, 8],
backgroundColor: 'rgba(54, 160, 235, 0.2)',
borderColor: 'rgba(54, 160, 235, 1)',
borderWidth: 1,
hierarchy: {
link: {
color: '#3cba9f'
}
}
}
]
};
const config = {
type: 'bar',
data,
options: {
plugins: {
hierarchy: {
label: {
position: 'outside'
}
}
},
scales: {
y: {
beginAtZero: true
}
}
}
};
new Chart(document.getElementById('myChart'), config);
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!