JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<html>
  <head>
    <title>Chart.js Bar Chart Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.min.js"></script>
  </head>
  <body>
    <canvas id="myChart" width="300" height="150"></canvas>
    <script>
        // Based on prepared DOM, initialize echarts instance
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["Shirt","Cardigan","Chiffon Shirt","Pants","Heels","Socks"],
                datasets: [{
                    label: 'Sales',
                    data: [5, 20, 36, 10, 10, 20],
                    backgroundColor: '#FF00FF'
                }]
            },
            options: {
                title: {
                    text: 'Chart.js Bar Chart',
                    display: true
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    </script>
  </body>
</html>