I'm using recharts to show an area graph. I want to show values of concentration over time, including when there is 0 concentration.

Currently with the dataset going in I can't get the x-axis to show 0 values where there aren't any time value / concentration values i.e.,

const outputTest = {
    Dexamphetamine: [
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 9,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 0,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 10,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 3,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 11,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 4,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 12,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 3,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 13,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 0,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 14,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 5,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 13,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 0,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 14,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 3,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 15,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 4,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 16,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 3,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 17,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 0,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 18,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 5,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 16,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 0,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 17,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 3,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 18,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 4,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 19,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 3,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 20,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 0,
      },
      {
        substance: 'Dexamphetamine',
        dose: '20',
        time: 21,
        startdate: '2021-08-09T14:00:00.000Z',
        enddate: '2021-11-10T13:00:00.000Z',
        concentration: 5,
      },
    ],
  };

This is how the chart is set up currently

 <AreaChart
          width={500}
          height={100}
          data={substanceDetails[Substance]}
          syncId="time"
          margin={{
            top: 10,
            right: 30,
            left: 0,
            bottom: 0,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="time" ticks={[25]}  domain={[0, 24]}/>
          <YAxis />
          <Tooltip />
          <Legend />
          <Area
            type="monotone"
            dataKey="concentration"
            stroke="#82ca9d"
            fill="#82ca9d"
          />
        </AreaChart>

How would I have the X values display when there is no use of medication. Folling the documentation, https://recharts.org/en-US/api/XAxis, Domain should be able to be set, but it currently isn't - unsure what I've done wrong here.

CodePudding user response：

I see two problems with your approach.

1. In your XAxis definition you specify that only the tick with time number 25 is supposed to show. But your dataset does not contain a time value with 25. Given that - no tick is rendered on your XAxis with the example dataset.

2. Your XAxis is a numeric axis with a specified (number) domain. Thus, you need to set your your Axis to type number, too.

In order to show the XAxis with ticks you could use:

<XAxis dataKey="time" type="number" domain={[0, 24]} />

See it working here: https://codesandbox.io/s/frosty-thompson-7czww3?file=/src/App.js