Add Stock Portfolio Pie Chart

[JacobGrisham]

Display user's stock holdings as a graphical representation using D3

[MADHUMITHASIVAKUMARR]

Adding a stock portfolio pie chart to your finance full-stack web app can enhance data visualization and provide users with valuable insights. Here’s how to implement a pie chart using a popular JavaScript library like Chart.js.

Step 1: Install Chart.js

If you haven't already, you can install Chart.js via npm:

npm install chart.js

Alternatively, you can include it via a CDN in your HTML:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Step 2: Set Up HTML Structure

Create a canvas element in your HTML where the pie chart will be rendered:

<div>
  <h2>Stock Portfolio Distribution</h2>
  <canvas id="portfolioChart"></canvas>
</div>

Step 3: Prepare Your Data

You’ll need to collect the data for your pie chart. For a stock portfolio, this might include stock symbols and their respective values. Here’s an example data structure:

const portfolioData = {
  labels: ['AAPL', 'GOOGL', 'MSFT', 'TSLA', 'AMZN'],
  values: [30000, 20000, 25000, 15000, 10000], // Example values in dollars
};

Step 4: Create the Pie Chart

Add the following JavaScript code to create the pie chart using Chart.js. Ensure this code runs after the DOM is fully loaded.

<script>
  const ctx = document.getElementById('portfolioChart').getContext('2d');
  const portfolioChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: portfolioData.labels,
      datasets: [{
        data: portfolioData.values,
        backgroundColor: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56',
          '#4BC0C0',
          '#9966FF',
        ],
        hoverOffset: 4,
      }],
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'Portfolio Allocation',
        },
      },
    },
  });
</script>

Step 5: Style the Chart (Optional)

You can use CSS to adjust the chart's appearance or container as needed. For example:

#portfolioChart {
  max-width: 600px;
  margin: 0 auto;
}

Step 6: Dynamic Data (Optional)

If your app fetches stock data dynamically (e.g., from an API), you can update the portfolioData object based on the fetched results. For example:

async function fetchPortfolioData() {
  const response = await fetch('/api/portfolio'); // Adjust endpoint as necessary
  const data = await response.json();

  portfolioData.labels = data.labels; // Assuming your API returns labels
  portfolioData.values = data.values; // Assuming your API returns values

  portfolioChart.update(); // Update the chart with new data
}

fetchPortfolioData();

Step 7: Test Your Implementation

Make sure to test your implementation locally. Check that the chart displays correctly and updates as expected with dynamic data.

Conclusion

With these steps, you've added a stock portfolio pie chart to your finance web app using Chart.js. This feature enhances data visualization, allowing users to quickly understand their investment distribution.