Stock History Line Chart

Adding a stock history line chart to your finance full-stack web app is a great way to visualize stock price trends over time. Here’s a step-by-step guide to implement this using Chart.js.

Step 1: Install Chart.js

If you haven’t installed Chart.js yet, you can do so 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 line chart will be rendered:

<div>
  <h2>Stock Price History</h2>
  <canvas id="stockHistoryChart"></canvas>
</div>

Step 3: Prepare Your Data

You’ll need historical stock data, including dates and prices. Here’s an example structure:

const stockHistoryData = {
  labels: ['2023-01-01', '2023-01-02', '2023-01-03', '2023-01-04', '2023-01-05'],
  prices: [150, 155, 152, 158, 160], // Example prices
};

Step 4: Create the Line Chart

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

<script>
  const ctx = document.getElementById('stockHistoryChart').getContext('2d');
  const stockHistoryChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: stockHistoryData.labels,
      datasets: [{
        label: 'Stock Price',
        data: stockHistoryData.prices,
        borderColor: '#36A2EB',
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        fill: true,
        tension: 0.1,
      }],
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'Stock Price History',
        },
      },
      scales: {
        x: {
          type: 'time',
          time: {
            unit: 'day',
          },
          title: {
            display: true,
            text: 'Date',
          },
        },
        y: {
          title: {
            display: true,
            text: 'Price (USD)',
          },
        },
      },
    },
  });
</script>

Step 5: Fetch Dynamic Data (Optional)

If your application fetches historical stock data from an API, you can dynamically update the chart. Here’s an example:

async function fetchStockHistory(stockSymbol) {
  const response = await fetch(`/api/stock-history?symbol=${stockSymbol}`); // Adjust endpoint as needed
  const data = await response.json();

  // Assuming the API returns { labels: [], prices: [] }
  stockHistoryData.labels = data.labels;
  stockHistoryData.prices = data.prices;

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

// Call the function with the desired stock symbol
fetchStockHistory('AAPL');

Step 6: Test Your Implementation

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

Conclusion

By following these steps, you can successfully add a stock history line chart to your finance web app using Chart.js. This visualization will help users analyze stock price trends over time.

JacobGrisham / Finance-Full-Stack-Web-App-using-Flask-and-SQL