import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
require('./style.css');

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);

import React from 'react';
import "./style.css";
import { PieChart } from "react-minimal-pie-chart";

export default class App extends React.Component {
  
  render() {
    let data = [
      { title: "One", value: 1, color: "#FFC074" },
      { title: "Two", value: 2, color: "#A2D2FF" },
      { title: "Three", value: 3, color: "#FF9292" },
    ];
    return (
      <div style={{backgroundColor:"#DAE5D0"}} className="App">
      <h1 class="heading">Hello World</h1>
        <PieChart
          animate
          animationDuration={40}
          animationEasing="ease-in"
          center={[50, 50]}
          data={data}
          lineWidth={15}
          lengthAngle={360}
          paddingAngle={0}
          radius={50}
          rounded
          startAngle={0}
          viewBoxSize={[100, 100]}
          labelStyle={{
            fontSize: "6px",
            fontColor: "FFFFFA",
            fontWeight: "500",
            fontFamily: "monospace"
          }}
          label={(data) => data.dataEntry.title}
          labelPosition={70}
        />
      </div>
    );
  }
}

.App{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:"red";
}

.heading{
  font-family: 'Courier New', Courier, monospace;
  font-size: 25px;
}

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

How to create a pie chart in React

Create a pie chart in React using react-minimal-pie-chart by customizing props like animate, data, radius, etc.

How to create a pie chart in React

Overview

Example

Explanation