<div class="container mx-auto px-4"> <div class="card bg-white rounded-lg shadow-lg"> <div class="card-header bg-gray-100 py-4 px-6"> <h2 class="text-xl font-bold">Bar Chart</h2> </div> <div class="card-body"> <canvas id="barChart"></canvas> </div> </div> </div> JavaScript (using Chart.js):
import Chart from 'chart.js'; const data = { labels: ['January', 'February', 'March', 'April', 'May', 'June'], datasets: [ { label: 'Sales', data: [120, 200, 150, 300, 250, 180], backgroundColor: [ 'rgba(129, 212, 250, 0.8)', 'rgba(129, 212, 250, 0.8)', 'rgba(129, 212, 250, 0.8)', 'rgba(129, 212, 250, 0.8)', 'rgba(129, 212, 250, 0.8)', 'rgba(129, 212, 250, 0.8)', ], borderColor: [ 'rgba(59, 130, 246, 1)', 'rgba(59, 130, 246, 1)', 'rgba(59, 130, 246, 1)', 'rgba(59, 130, 246, 1)', 'rgba(59, 130, 246, 1)', 'rgba(59, 130, 246, 1)', ], borderWidth: 1, }, ], }; const options = { scales: { x: { display: false, }, y: { display: false, }, }, }; const ctx = document.getElementById('barChart').getContext('2d'); new Chart(ctx, { type: 'bar', data: data, options: options, }); CSS (using Tailwind CSS):
.container { min-height: 100vh; display: flex; justify-content: center; align-items: center; } .card { width: 400px; } .card-header { border-bottom-width: 1px; border-color: rgba(0, 0, 0, 0.1); } .card-body { height: 300px; } canvas { width: 100% !important; height: 100% !important; } In the above example, we create a bar chart using Chart.js and customize the appearance using Tailwind CSS classes.
The chart is displayed within a card component, and the x-axis and y-axis labels are removed by setting display: false in the chart options.
The card component has a rounded border (rounded-lg) and a shadow (shadow-lg) applied.
The bar chart uses a gradient background (bg-gradient) defined in the dataset's backgroundColor property.
Include this chart.js cdn inside head.
Top comments (0)