xanderdeseyn / react-native-responsive-linechart

A customizable and responsive line or area chart for react-native
https://react-native-responsive-linechart.surge.sh
MIT License
202 stars 46 forks source link

Passing whole ChartPointData to all custom formatter functions #71

Closed BlackWild closed 12 months ago

BlackWild commented 3 years ago

I am not sure why the formatter function for <HorizontalAxis /> does not support using the meta entry in points' data. Currently it works like this:

<HorizontalAxis theme={{
  labels: { formatter: (v) => moment(v).format("H:mm") },
}} />

I am trying to include extra characters in the x axis using the meta property. I think it would be great if it was possible to pass all the data to the formatter function! for example:

<HorizontalAxis theme={{
  labels: { formatter: (v, meta) => moment(v).format("H:mm") + " - " + meta },
}} />

I believe it may break backward compatibility if the v input becomes the ChartPointData but I think it is even better to do so if possible (identical to the Tooltip formatter).

xanderdeseyn commented 3 years ago

Hi BlackWild,

The reason for this is that ticks on the horizontal axis do no necessarily line up with data points of the chart. It would be quite a breaking change to implement this now, because it would remove a lot of existing functionality for the axis at this moment, like specifying number of ticks or axis tick values.

Unless I am missing something?

BlackWild commented 3 years ago

Since I am not familiar with the source code of this project, please close this issue if you think this change will break a lot of current functionalities. However, what I had in mind was being able to use additional information in labeling of the points on the axis. I didn't think it would break any functionality if we only change the place in the code where the label of the points are going to be created via the formatter function, and pass the meta property to the function alongside the x or y values.

My exact case is this (ignore my first comment!): We have a chart that our data is ordered and the x axis shows time. However since the time of several points in our situation is not from a 100% accurate source, if I use time as the value for x, the chart becomes messy. We prefer to keep the ordering of the data fixed but since the order does not show time we couldn't use index numbers as x values. Our solution was to use the order of the points for drawing the chart (x values), and use each point's time just for labeling points on the x axis.

{
  y: value,
  x: order_index,
  meta: timestamp // may be inconsistent with x ordering therefore only used in labeling
}