X and Y axis information

[SpiritON]

Good afternoon, tell me please if it is possible in your schedule to display information on the X and Y axis as in a screen?

[dragonfi-kent]

Same here, how did you achieve adding X and Y labels?

[3KINGZ]

@SpiritON @dragonfi-kent any luck with this?

[sulhadin]

Hi, @honeybadger26 any luck with this? When are you going to complete the enhancement?

[honeybadger26]

Hi all. Apologies, I'll try to set some time to implement this but this is a fairly complex feature (especially the Y Axis) so there is a high probability that it won't be done any time soon.

I would instead recommend trying to do this with your own component so that you have a lot more flexibility with customising it. For example this will produce a basic X Axis:

import { formatDatetime } from 'react-native-wagmi-charts';

const formatLabel = (value: number) => {
  return {
    time: formatDatetime({
      value,
      locale: 'en-AU',
      options: { hour: 'numeric', minute: 'numeric' },
    }),
    day: formatDatetime({
      value,
      locale: 'en-AU',
      options: { day: 'numeric', month: 'numeric' },
    }),
  };
};

const xLabels = useMemo(() => {
  const count = 3; // Number of labels to generate
  const start = data[0].timestamp;
  const end = data[data.length - 1].timestamp;
  const step = (end - start) / (count - 1);
  const labels = []; // Stores the points that will be shown on the X Axis

  for (let i = 0; i < count - 1; i++) {
    labels.push(formatLabel(start + step * i));
  }

  labels.push(formatLabel(end));
  return labels;
}, [data]);

...

<LineChart>
  {/* Your Line Chart */}
</LineChart>

<View style={{
  width: '100%',
  borderTopColor: 'black',
  borderTopWidth: 1,
}}>
  <View style={{
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  }}>
    {xLabels.map((label, index) => (
      <View style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: index === 0 ? 'flex-start' : (index === xLabels.length - 1) ? 'flex-end' : 'center',
      }}>
        <View style={{
          width: 1,
          height: 10,
          borderLeftColor: 'black',
          borderLeftWidth: 1,
        }}></View>
        <Text>{label.time}</Text>
        <Text>{label.day}</Text>
      </View>
    ))}
  </View>
</View>