Recharts - передать массив значений компоненту Line

В официальной документации указано (ссылка):

точки

Координаты всех точек на линии, обычно рассчитываемые внутри компании.

_{ФОРМАТ:}

[{x: 12, y: 12, value: 240}]

Чтобы передать предоставленный вами массив, вам нужно немного преобразовать массив. Вы можете сделать это с помощью:

const data = array.map(x => ({pv: x}));

return (
  <LineChart data={data}>
    <Line type="monotone" dataKey="pv" stroke="#8884d8" />
  </LineChart>
);

Очевидно, здесь многое упущено, но вы, вероятно, можете не указывать сами координаты, поскольку вы, вероятно, рисуете в декартовой плоскости. Координаты будут рассчитаны автоматически - просто передайте значения.

Здесь линия выберет ключ pv из вашего набора данных и нарисует их.

Фрагмент получен из: http://recharts.org/en-US/api/LineChart

Для тех, кто хочет использовать массив данных как есть, без функции карты массива. Ваш ответ - предоставление функции для dataKey prop:

    const data= [0, 0, 1, 2, 454, 3];

    <LineChart width={500} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <YAxis dataKey={(v) => v} />
      <Line type="monotone" dataKey={v=>v} stroke="#8884d8" />
    </LineChart>

Если вы хотите предоставить больше данных, таких как имена меток XAxis, легенда всплывающей подсказки, вам следует использовать функцию карты и добавить другие свойства.

Вам необходимо предоставить массив объектов в виде данных

const array = [0, 0, 1, 2, 454, 3];
const data = array.map((value,index)=>({index,value}))

а потом

<LineChart width={600} height={300} data={data}>
   <XAxis dataKey="index"/>
   <YAxis/>
   <Line  dataKey="value" stroke="#8884d8" activeDot={{r: 8}}/>
</LineChart>

Демо на https://jsfiddle.net/mxgkwszq/1/