6

client.js

import React from "react";
import ReactDOM from "react-dom";
import { VictoryBar, VictoryChart, VictoryAxis } from "victory";

const data = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 },
];

class Main extends React.Component {
  render() {
    return (
      <div>
        <h1>Victory Tutorial</h1>
        <VictoryChart domainPadding={30}>
          <VictoryAxis
            // tickValues는 축 위의 점의 개수와 위치를 지정합니다.
            tickValues={[1, 2, 3, 4]}
            tickFormat={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
          />
          <VictoryAxis
            dependentAxis
            //tickFormat은 점이 어떻게 보여질지를 지정합니다.
            tickFormat={(x) => `$${x / 1000}k`}
          />
          <VictoryBar data={data} x="quarter" y="earnings" />
        </VictoryChart>
      </div>
    );
  }
}

const app = document.getElementById("app");
ReactDOM.render(<Main />, app);