oda-framework/components/viewers/chart/index.html

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

<meta charset="utf-8">
<oda-tester>
    <oda-chart id="chart"></oda-chart>
</oda-tester>
<script type="module">
    import '../../../oda.js';
    import './chart.js';
    chart.type = 'bar';
    chart.data = {
        labels: ['color-260', 'color-290', 'color-320', 'color-350', 'color-20', 'color-50', 'color-80', 'color-110', 'color-140', 'color-170', 'color-200', 'color-230'],
        datasets: [...[{
            label: '# of Colors',
            data: ['260', '20', '290', '110', '320', '170', '200', '350', '50', '80', '140', '230'],
            backgroundColor: [
                'oklch(.723 .31 260 / .4)',
                'oklch(.723 .31 290 / .4)',
                'oklch(.723 .31 320 / .4)',
                'oklch(.723 .31 350 / .4)',
                'oklch(.723 .31 20 / .4)',
                'oklch(.723 .31 50 / .4)',
                'oklch(.723 .31 80 / .4)',
                'oklch(.723 .31 110 / .4)',
                'oklch(.723 .31 140 / .4)',
                'oklch(.723 .31 170 / .4)',
                'oklch(.723 .31 200 / .4)',
                'oklch(.723 .31 230 / .4)'
            ],
            borderColor: [
                'oklch(.723 .31 260 / .7)',
                'oklch(.723 .31 290 / .7)',
                'oklch(.723 .31 320 / .7)',
                'oklch(.723 .31 350 / .7)',
                'oklch(.723 .31 20 / .7)',
                'oklch(.723 .31 50 / .7)',
                'oklch(.723 .31 80 / .7)',
                'oklch(.723 .31 110 / .7)',
                'oklch(.723 .31 140 / .7)',
                'oklch(.723 .31 170 / .7)',
                'oklch(.723 .31 200 / .7)',
                'oklch(.723 .31 230 / .7)'
            ],
            borderWidth: 1
        }]]
    }
    // chart.options = {
    //     scales: {
    //         x: {
    //             display: false
    //         }
    //     }
    // }
</script>