react -Rechart

BackEnd_Ash.log·2020년 6월 25일
0

https://recharts.org/en-US/examples/TinyBarChart

https://gogomalibu.tistory.com/18
I will use the site here.

you have to install

you have to install npm install recharts

Here is the source code.

import React, { PureComponent } from "react";
import "./App.css";
import {
  BarChart,
  Bar,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts";

const data = [
  {
    name: "6month",
    uv: 4000,
  },
  {
    name: "7month",
    uv: 3000,
  },
  {
    name: "8month",
    uv: 2000,
  },
];

class App extends PureComponent {
  render() {
    return (
      <div className="div_test">
        asdasd
        <BarChart
          width={500}
          height={400}
          data={data}
          margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Bar dataKey="uv" fill="#82ca9d" />
        </BarChart>
      </div>
    );
  }
}
export default App;

if you want function

just change


class App ==> const App=()=>{
  
}

profile
꾸준함이란 ... ?

0개의 댓글