chart-example.html

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
<script>
// chart-1
const ctx = document.getElementById("chart-1").getContext("2d");
const sunriseDates = document.querySelectorAll("[sunrise-date]");
const sunriseValues = document.querySelectorAll("[sunrise-value]");
const fvsDates = document.querySelectorAll("[fvs-date]");
const fvsValues = document.querySelectorAll("[fvs-value]");
const lgtDates = document.querySelectorAll("[lgt-date]");
const lgtValues = document.querySelectorAll("[lgt-value]");

// Parse date string to Date object helper function
const parseDate = (dateString) => {
  const date = new Date(dateString);
  return date;
};

const sunriseData = Array.from(sunriseDates).map((date, index) => ({
  x: parseDate(date.getAttribute("sunrise-date")),
  y: parseFloat(sunriseValues[index].getAttribute("sunrise-value")),
}));

const fvsData = Array.from(fvsDates).map((date, index) => ({
  x: parseDate(date.getAttribute("fvs-date")),
  y: parseFloat(fvsValues[index].getAttribute("fvs-value")),
}));

const lgtData = Array.from(lgtDates).map((date, index) => ({
  x: parseDate(date.getAttribute("lgt-date")),
  y: parseFloat(lgtValues[index].getAttribute("lgt-value")),
}));

// sort by date
sunriseData.sort((a, b) => a.x - b.x);
fvsData.sort((a, b) => a.x - b.x);
lgtData.sort((a, b) => a.x - b.x);

// create gradients
const sunriseGradient = ctx.createLinearGradient(0, 0, 0, 400);
sunriseGradient.addColorStop(0, "rgba(254, 210, 63, 0.2)");
sunriseGradient.addColorStop(1, "rgba(254, 210, 63, 0)");

const fvsGradient = ctx.createLinearGradient(0, 0, 0, 400);
fvsGradient.addColorStop(0, "rgba(13, 173, 105, 0.2)");
fvsGradient.addColorStop(1, "rgba(13, 173, 105, 0)");

const lgtGradient = ctx.createLinearGradient(0, 0, 0, 400);
lgtGradient.addColorStop(0, "rgba(58, 206, 172, 0.2)");
lgtGradient.addColorStop(1, "rgba(58, 206, 172, 0)");

// chart-1
const data = new Chart(ctx, {
  type: "line",
  data: {
    datasets: [
      {
        label: "Sunrise Active Opportunities Fund",
        data: sunriseData,
        borderColor: "rgba(254, 210, 63, 1)",
        backgroundColor: sunriseGradient,
        fill: true,
        pointRadius: 0, // Remove data point dots
        borderWidth: 1,
      },
      {
        label: "FVS",
        data: fvsData,
        borderColor: "rgba(13, 173, 105, 1)",
        backgroundColor: fvsGradient,
        fill: true,
        pointRadius: 0, // Remove data point dots
        borderWidth: 1,
      },
      {
        label: "LGT",
        data: lgtData,
        borderColor: "rgba(58, 206, 172, 1)",
        backgroundColor: lgtGradient,
        fill: true,
        pointRadius: 0, // Remove data point dots
        borderWidth: 1,
      },
    ],
  },
  options: {
    maintainAspectRatio: true,
    aspectRatio: 1.4, // Default is 2, adjust as needed
    layout: {
      padding: {
        left: 24,
        right: 24,
        top: 24,
        bottom: 24,
      },
    },
    scales: {
      x: {
        type: "time",
        time: {
          unit: "year",
          tooltipFormat: "MMM d, yyyy",
        },
        grid: {
          color: "rgba(255, 255, 255, 0.1)", // Light grid lines
        },
        ticks: {
          color: "#ffffff", // White tick labels
        },
      },
      y: {
        position: "right",
        grid: {
          color: "rgba(255, 255, 255, 0.1)", // Light grid lines
        },
        ticks: {
          color: "#ffffff", // White tick labels
          callback: function (value) {
            return value;
          },
        },
      },
    },
    plugins: {
      legend: {
        display: false,
      },
    },
  },
});

// chart-2
const ctx2 = document.getElementById("chart-2").getContext("2d");
const saveTaxesNames = document.querySelectorAll("[save-taxes-name]");
const saveTaxesValues = document.querySelectorAll("[save-taxes-value]");

const saveTaxesData = Array.from(saveTaxesNames).map((name, index) => ({
  x: name.getAttribute("save-taxes-name"),
  y: parseInt(saveTaxesValues[index].getAttribute("save-taxes-value"), 10),
}));

// Sort into this order: Stocks, Bonds, Other
saveTaxesData.sort((a, b) => {
  const order = ["Stocks", "Bonds", "Other"];
  return order.indexOf(a.x) - order.indexOf(b.x);
});

// yellow gradient
const yellowGradient = ctx2.createLinearGradient(0, 0, 0, 400);
yellowGradient.addColorStop(0, "rgba(254, 210, 63, 1)");
yellowGradient.addColorStop(0.7, "rgba(254, 210, 63, 1)");
yellowGradient.addColorStop(1, "rgba(254, 210, 63, 0)");

// blue gradient
const greenGradient = ctx2.createLinearGradient(0, 0, 0, 400);
greenGradient.addColorStop(0, "rgba(13, 173, 105, 1)");
greenGradient.addColorStop(0.7, "rgba(13, 173, 105, 1)");
greenGradient.addColorStop(1, "rgba(13, 173, 105, 0)");

// green gradient
const blueGradient = ctx2.createLinearGradient(0, 0, 0, 400);
blueGradient.addColorStop(0, "rgba(58, 206, 172, 1)");
blueGradient.addColorStop(0.7, "rgba(58, 206, 172, 1)");
blueGradient.addColorStop(1, "rgba(58, 206, 172, 0)");

const barColors = {
  Stocks: yellowGradient,
  Bonds: greenGradient,
  Other: blueGradient,
};

// Create bar chart with names on x-axis and values on y-axis
new Chart(ctx2, {
  type: "bar",
  data: {
    labels: saveTaxesData.map((data) => data.x),
    datasets: [
      {
        label: "Save Taxes",
        data: saveTaxesData.map((data) => data.y),
        backgroundColor: saveTaxesData.map((data) => barColors[data.x]),
        borderColor: saveTaxesData.map((data) => barColors[data.x]),
        borderWidth: 1,
        borderRadius: { topLeft: 10, topRight: 10 }, // Rounded top corners
      },
    ],
  },
  options: {
    maintainAspectRatio: true,
    aspectRatio: 1.4, // Default is 2, adjust as needed
    layout: {
      padding: {
        left: 24,
        right: 24,
        top: 24,
        bottom: 24,
      },
    },
    scales: {
      x: {
        grid: {
          color: "rgba(255, 255, 255, 0.1)", // Light grid lines
        },
        ticks: {
          color: "#ffffff", // White tick labels
        },
      },
      y: {
        position: "right",
        grid: {
          color: "rgba(255, 255, 255, 0.1)", // Light grid lines
        },
        ticks: {
          color: "#ffffff", // White tick labels
          callback: function (value) {
            return value / 1000 + "k"; // Format as '100k', '200k', etc.
          },
          stepSize: 100000, // Show a tick every 100k
        },
        max: 400000, // Set max value to 400k
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: false, // Disable tooltips
      },
    },
  },
});
</script>