Visualizing Salary Data with Chart.js

Create an interactive salary comparison chart using Chart.js to help frontend developers understand market rates and negotiate better salaries.

<html>
<head>
    <title>Salary Data Visualization</title>
    <!-- Import Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Style for our chart container -->
    <style>
        .chart-container {
            width: 80%;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <canvas id="salaryChart"></canvas>
    </div>
    <script>
        // Data for salary ranges
        const salaryData = {
            labels: ['Entry Level', 'Junior', 'Mid Level', 'Senior', 'Lead'],
            datasets: [{
                label: 'Frontend Developer Salaries',
                backgroundColor: 'rgba(0, 123, 255, 0.5)',
                borderColor: 'rgba(0, 123, 255, 1)',
                data: [50000, 65000, 75000, 85000, 95000]
            }]
        };

        // Configuration for the chart
        const config = {
            type: 'bar',
            data: salaryData,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        };

        // Initialize the chart
        new Chart(
            document.getElementById('salaryChart'),
            config
        );
    </script>
</body>
</html>

This HTML document includes importing the Chart.js library, styles for the chart container, and script tags containing the JavaScript for creating a bar chart with salary data for different levels of frontend developer roles. It uses the canvas element to draw the chart.