function createChart(
  chart,
  endpoint,
  xAxisType,
  scaleChart = false,
) {
  async function fetchDataForChart(query) {
    try {
      const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
      const response = await fetch(apiEndpoint);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const chartData = await response.json();
      console.log(chartData)
      updateChart(chartData);
    } catch (error) {
      console.error("Fetching data failed:", error);
    }
  }

  function updateChart(chartData) {

    var option = {
      tooltip: {
        ...tooltip,
      },
      xAxis: {
        type: xAxisType,
        data: chartData.map((item) => item.date),
      },
      yAxis: {
        scale: scaleChart,
        type: "value",
      },
      series: [
        {
          type: "bar",
          stack: "value",
          name: "10th",
          barCategoryGap: "0%",
          data: chartData.map((row) => row.feerate_10th),
        },
        {
          type: "bar",
          stack: "value",
          name: "25th",
          barCategoryGap: "0%",
          data: chartData.map((row) => row.feerate_25th),
        },
        {
          type: "bar",
          stack: "value",
          name: "50th",
          barCategoryGap: "0%",
          data: chartData.map((row) => row.feerate_50th),
        },
        {
          type: "bar",
          stack: "value",
          name: "75th",
          barCategoryGap: "0%",
          data: chartData.map((row) => row.feerate_75th),
        },
        {
          type: "bar",
          stack: "value",
          name: "90th",
          barCategoryGap: "0%",
          data: chartData.map((row) => row.feerate_90th),
        },
      ],
    };
    chart.setOption(option, true);
  }

  // listen for filter events for this target
  document.addEventListener("filterChange", function(event) {
    eventDetail = event.detail;
    if (eventDetail.filterActions.includes("refresh")) {
      chartData = [];
      query = queryConstructor();
      fetchDataForChart(query);
      updateChart(chartData);
    } 
  });

  let query = queryConstructor();
  fetchDataForChart(query);
}

document.addEventListener("DOMContentLoaded", function() {
  chartData = [];
  let chartDom = document.getElementById("feerate-percentiles-chart");
  let myChart = echarts.init(chartDom);

  const filterPeriods = {"7 day": 7, "28 day": 28, "365 day": 365, "2 years": 730, "5 years": 1826, "10 years": 3652, "all time": 10000};
  dropDownFilter("days_ago_dropdown_filter", "days_ago", ["feerate-percentile-chart"], filterPeriods, "365 day")

  createChart(
    chart = myChart,
    endpoint = "feerate_percentiles",
    xAxisType = "category",
  );
});