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!

All versions