Accuracy Bar Graph - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Model Accuracy Bar Graph</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <div style="width: 60%; margin: auto;"> <canvas id="accuracyChart"></canvas> </div> <script> // Data for the bar chart const data = { labels: ['CNN', 'LSTM', 'CNN LSTM', 'ARIMA', 'SVR', 'Random Forest'], datasets: [{ label: 'Accuracy (R²)', data: [0.85, 0.87, 0.92, 0.65, 0.70, 0.75], backgroundColor: [ 'rgba(75, 192, 192, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(255, 99, 132, 0.6)', 'rgba(153, 102, 255, 0.6)', 'rgba(255, 159, 64, 0.6)' ], borderColor: [ 'rgba(75, 192, 192, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(255, 99, 132, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }; // Configuration for the bar chart const config = { type: 'bar', data: data, options: { responsive: true, plugins: { title: { display: true, text: 'Model Accuracy Comparison (R²)' } }, scales: { y: { beginAtZero: true, max: 1 } } } }; // Render the chart const ctx = document.getElementById('accuracyChart').getContext('2d'); new Chart(ctx, config); </script> </body> </html>
