Creating a Chart with HTML, CSS, and JavaScript using Chart.js

Introduction

• Video on how to create a chart using HTML, CSS, and JavaScript.
• Use of Chart.js library to design the chart.

Setting Up the Project

1. Folder Creation
   • Create a folder named chart.
   • Open folder in VS Code.
2. File Creation
   • Create index.html for HTML content.
   • Create style.css for CSS styles.
   • Create main.js for JavaScript code.

HTML File Setup

• Basic HTML5 template: ! + Tab.
• Link CSS file: <link rel="stylesheet" href="style.css">.
• Link JavaScript file: <script src="main.js"></script>.
• Create HTML structure:
  • Heading: <h2 class="chart-heading">Popular Programming Languages</h2>.
  • Container: <div class="programming-stats">.
  • Chart Container: <div class="chart-container"><canvas class="my-chart"></canvas></div>.
  • Details: <div class="details"><ul><li>Python: <span class="percentage">30%</span></li></ul></div>.

JavaScript File Setup

• Reference HTML canvas element: const myChart = document.querySelector('.my-chart');
• Initialize Chart.js chart:

  new Chart(myChart, {
      type: 'doughnut',
      data: chartData,
      options: { /* Customize chart options */ }
  });
  

• Define chart data:

  const chartData = {
      labels: ['Python', 'Java', 'JavaScript', 'C#', 'Others'],
      datasets: [{
          label: 'Language Popularity',
          data: [30, 17, 10, 7, 36],
          backgroundColor: [/* Color list */],
      }]
  };
  

• Populate the unordered list using JavaScript wrapper function:

  const populateUL = () => {
      chartData.labels.forEach((l, i) => {
          let li = document.createElement('li');
          li.innerHTML = `${l}: <span class="percentage">${chartData.data[i]}%</span>`;
          ul.appendChild(li);
      });
  }
  

CSS Styles

• Heading Styling: .chart-heading (font, color, text-transform, etc.)
• Chart Container: .chart-container (width, centering, etc.)
• Hide Default Legends:

  options: {
      plugins: {
          legend: { display: false }
      }
  }
  

• General Styles (e.g., margin, padding adjustments).
• Flexbox for layout alignment.
• List item styling and percentage span.

Final Adjustments

• Use of Google Fonts for specific typography.
• CSS transitions for hover effects.
• Box-shadow adjustments for UI richness.

Running and Viewing

• Use Live Server extension in VS Code to view changes in a browser.
• Final confirmation by testing real-time data updates in the chart and the list.

Conclusion

• Complete guide to creating a dynamic chart with additional details using HTML, CSS, JavaScript, and Chart.js library.
• Users are encouraged to inspect the source code if needed (link provided in the video description).

Additional Resources

• Source code link for better referencing.
• Encouragement to ask questions in the comments for clarifications.
• Invitation to like the video and subscribe for more similar content.