Home > Mobile >  Setting a dynamic min and max date in CHARTJS using date-fn adapter
Setting a dynamic min and max date in CHARTJS using date-fn adapter

Time:06-28

I am currently working on an analytic dashboard, and I have chosen Chartjs to visualize the graphs, everything works fine except I do not seem to know how to set the MIN and MAX date of the chartjs time object dynamically. It is been hardcoded like this:

const config = {
    type: "bar",
    data: {
      datasets: [
        {
          label: "base",
          data: monthly_data,
          backgroundColor: ["rgba(255, 99, 132, 0.2)"],
          borderColor: ["rgba(255, 99, 132, 1)"],
          borderWidth: 1,
          minBarLength: 7,
          parsing: {
            xAxisKey: "x",
            yAxisKey: "base",
          },
        },
        {
          label: "Case",
          data: monthly_data,
          backgroundColor: ["rgba(54, 162, 235, 0.2)"],
          borderColor: ["rgba(54, 162, 235, 1)"],
          borderWidth: 1,
          minBarLength: 7,
          parsing: {
            xAxisKey: "x",
            yAxisKey: "case",
          },
        },
        {
          label: "Standard",
          data: monthly_data,
          backgroundColor: ["rgba(255, 206, 86, 0.2)"],
          borderColor: ["rgba(255, 206, 86, 1)"],
          borderWidth: 1,
          minBarLength: 7,
          parsing: {
            xAxisKey: "x",
            yAxisKey: "standard",
          },
        },
      ],
    },
    options: {
      scales: {
        x: {
          type: "time",
          min: "2021-03-01",
          max: "2022-03-31",
          time: {
            unit: "month",
          },
        },
      },
    },
  };

Can I call a function that can set this dynamically like for example in a monthly view the chart should show 12 months back?

CodePudding user response:

you can just pass a function to the min and max that calculates the min and max for you like so:

options: {
  scales: {
    x: {
      type: 'time',
      min: () => {
        return calculateMin()
      }
    }
  }
}
  • Related