EChart Monthly Spend Comparison

by sberube

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Monthly Spend Comparison</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
  <style>
    #chart-container {
      width: 800px;
      height: 600px;
    }
  </style>
</head>

<body>
  <div id="chart-container"></div>

  <script>
    // Create an instance of the chart
    var chart = echarts.init(document.getElementById('chart-container'));

    // Generate the next 12 months of data
    var currentSpend = [];
    var savingsPlanSpend = [];
    var today = new Date();
    var currentMonth = today.getMonth();
    var currentYear = today.getFullYear();
    var months = [];
    var monthlySpend = 100000; // Your current monthly spend

    for (var i = 0; i < 12; i++) {
      var month = (currentMonth + i) % 12;
      var year = currentYear;
      if (month < currentMonth) {
        year = currentYear + 1;
      }
      var monthLabel = month < 9 ? '0' + (month + 1) : (month + 1);
      months.push(year + '-' + monthLabel);
      currentSpend.push(monthlySpend);
      savingsPlanSpend.push(monthlySpend * 0.8); // 20% savings
    }

    // Configure the chart options
    var options = {
      title: {
        text: 'Monthly Spend Comparison'
      },
      tooltip: {
        trigger: 'axis',
        formatter: '{b}:<br/>{a0}: {c0} USD<br/>{a1}: {c1} USD'
      },
      legend: {
        data: ['Current Spend', 'Savings Plan Spend']
      },
      xAxis: {
        type: 'category',
        data: months
      },
      yAxis: {
        type: 'value',
        name: 'Spend (USD)'
      },
      series: [{
        name: 'Current Spend',
        type: 'bar',
        data: currentSpend,
        itemStyle: {
          normal: {
            color: 'rgba(0, 0, 255, 0.3)' // Transparent blue bars
          }
        }
      }, {
        name: 'Savings Plan Spend',
        type: 'bar',
        data: savingsPlanSpend,
        itemStyle: {
          normal: {
    ...