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.
    <title>Salary Data Visualization</title>
    <!-- Import Chart.js -->
    <script src=""></script>
    <!-- Style for our chart container -->
        .chart-container {
            width: 80%;
            margin: auto;
    <div class="chart-container">
        <canvas id="salaryChart"></canvas>
        // 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(
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.