{"size": 2065, "ext": "js", "max_stars_repo_path": "src/docs/apiExamples/ErrorBar.js", "max_stars_repo_name": "ttous/recharts.org", "max_stars_repo_stars_event_min_datetime": "2016-01-21T09:17:33.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-19T18:10:37.000Z", "max_issues_repo_path": "src/docs/apiExamples/ErrorBar.js", "max_issues_repo_name": "ttous/recharts.org", "max_issues_repo_issues_event_min_datetime": "2016-03-25T03:46:53.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-23T10:27:09.000Z", "max_forks_repo_path": "src/docs/apiExamples/ErrorBar.js", "max_forks_repo_name": "ttous/recharts.org", "max_forks_repo_forks_event_min_datetime": "2016-02-20T19:50:03.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-16T16:10:43.000Z"}
{"max_stars_count": 38, "max_issues_count": 68, "max_forks_count": 145, "avg_line_length": 19.8557692308, "max_line_length": 105, "alphanum_fraction": 0.5380145278}
import React from 'react';
import { ScatterChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Scatter, ErrorBar } from 'recharts';

const data = [
  {
    x: 45,
    y: 100,
    z: 150,
    errorY: [30, 20],
    errorX: 5,
  },
  {
    x: 100,
    y: 200,
    z: 200,
    errorY: [20, 30],
    errorX: 3,
  },
  {
    x: 120,
    y: 100,
    z: 260,
    errorY: 20,
    errorX: [5, 3],
  },
  {
    x: 170,
    y: 300,
    z: 400,
    errorY: [15, 18],
    errorX: 4,
  },
  {
    x: 140,
    y: 250,
    z: 280,
    errorY: 23,
    errorX: [6, 7],
  },
  {
    x: 150,
    y: 400,
    z: 500,
    errorY: [21, 10],
    errorX: 4,
  },
  {
    x: 110,
    y: 280,
    z: 200,
    errorY: 21,
    errorX: [5, 6],
  },
];

const example = () => (
  <ScatterChart
    width={730}
    height={250}
    margin={{
      top: 20,
      right: 20,
      bottom: 0,
      left: 20,
    }}
  >
    <CartesianGrid />
    <XAxis dataKey="x" type="number" name="stature" unit="cm" />
    <YAxis dataKey="y" type="number" name="weight" unit="kg" />
    <Tooltip />
    <Scatter name="A school" data={data} fill="#ff7300">
      <ErrorBar dataKey="errorY" width={4} strokeWidth={2} stroke="green" direction="y" />
      <ErrorBar dataKey="errorX" width={0} strokeWidth={1} stroke="blue" opacity={0.8} direction="x" />
    </Scatter>
    <Legend />
  </ScatterChart>
);

const exampleCode = `
<ScatterChart 
  width={730} 
  height={250}
  margin={{ top: 20, right: 20, bottom: 0, left: 20 }}
>
  <CartesianGrid />
  <XAxis dataKey="x" type="number" name="stature" unit="cm" />
  <YAxis dataKey="y" type="number" name="weight" unit="kg" />
  <Tooltip />
  <Scatter name="A school" data={data} fill="#ff7300">
    <ErrorBar dataKey="errorY" width={4} strokeWidth={2} stroke="green" direction="y" />
    <ErrorBar dataKey="errorX" width={0} strokeWidth={1} stroke="blue" opacity={0.8} direction="x" />
  </Scatter>
  <Legend/>
</ScatterChart>
`;

export default [
  {
    demo: example,
    code: exampleCode,
    dataCode: `const data = ${JSON.stringify(data, null, 2)}`,
  },
];
