article

Saturday, October 30, 2021

ReactJS pie charts

ReactJS pie charts

Install victory-pie

npm install victory-pie --save
src/index.js
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
)
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ReactJS </title>
  </head>
  <body>
    <div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import React from "react";
import { VictoryPie } from "victory-pie";

const myData = [
  { x: "PHP", y: 900 },
  { x: "Python", y: 400 },
  { x: "Javascript", y: 300 },
];

const App = () => {
  return (
    <div style={{ height: 620 }}>
      <VictoryPie
        data={myData}
        colorScale={["blue", "yellow", "red"]}
        radius={100}
      />
    </div>
  );
};

export default App;

Related Post