импортировать метку Y в barChart в наборе реагирующих нативных диаграмм

Из исходного кода BarChart кажется, что функция formatYLabel должна быть объявлена ​​как свойство внутри chartConfig, а не задана как реквизит, как в случае с LineChart.

Еще одна проблема, о которой вам нужно знать, заключается в том, что эта библиотека получает минимальное и максимальное значение оси Y на основе массива данных, который вы передаете. Проблема в том, что даже если вы можете установить свои метки как [80, 90, 100], значения выиграл Не обязательно соответствовать.

Другими словами: если ваша метка минимального значения отличается от минимального значения в вашем массиве данных, метки не будут полностью совпадать.

Несмотря на то, что по умолчанию используется минимальное значение из массива данных, есть свойство fromZero, которое вы можете установить на true, что делает начальное значение оси Y 0.

Мы можем воспользоваться этим, сделав что-то вроде этого:

const minValue = 80;

function* yLabel() {
  yield* [minValue, 90, 100];
}

const datapoints = [89, 88, 96, 97, 94, 91, 88].map(
  (datapoint) => datapoint - minValue - 1,
);

const data = {
  labels: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  datasets: [
    {
      data: datapoints,
    },
  ],
};

const App = () => {
  const screenWidth = Dimensions.get('window').width;
  const yLabelIterator = yLabel();

  return (
    <View>
      <BarChart
        style={{
          marginVertical: 8,
          borderRadius: 16,
        }}
        data={data}
        segments={2}
        width={screenWidth}
        height={220}
        verticalLabelRotation={0}
        fromZero={true}
        chartConfig={{
          backgroundColor: '#e26a00',
          backgroundGradientFrom: '#fb8c00',
          backgroundGradientTo: '#ffa726',
          decimalPlaces: 0, // optional, defaults to 2dp
          color: (opacity = 3) => `rgba(200, 255, 255, ${opacity})`,
          labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
          style: {
            borderRadius: 30,
          },
          formatYLabel: () => yLabelIterator.next().value,
          data: data.datasets,
          propsForDots: {
            r: '6',
            strokeWidth: '2',
            stroke: '#ffa726',
          },
        }}
      />
    </View>
  );
};

export default App;

Я также изменил количество сегментов с 3 на 2. Сегменты — это промежутки между метками, поэтому, если вы хотите 3 метки, вам нужны 2 сегмента.

Результат:

Таким образом, идея вычитания minValue - 1 из каждой точки данных состоит в том, чтобы сказать: в чем разница между моей меткой минимального значения 80 и 0 (начальное значение, когда fromZero установлено на true). Затем вычтите еще 1, поскольку само 0 также является частью диапазона. Это дает нам значение, которое показывает, насколько каждое значение в массиве данных должно быть скорректировано, чтобы столбцы отображались на правильной высоте в соответствии с переданными нами метками.

Этот подход предполагает, что ваша метка максимального значения будет больше, чем максимальное значение в массиве данных.