You probably have seen these skills doughnut skill charts on portfolio websites before. I would like to share how I implemented it using React, Webpack, ChartJS2 for react and Rails.

demo(Hard skills)
github

What you need to have ready:

1. Ruby on Rails application
2. WebPack with react-dom 
3. react-chartjs-2
4. Bootstrap(I use ruby gem which goes with rails)

<%= javascript_pack_tag 'Home' %>
<%= stylesheet_link_tag "home" %>

<div id="reactHome"></div>

Before going forward I want to show my React Dataflow Chart that you can have an idea how all Components connected:

Next we need to create actual Home Component with render method inside. I have standard file structure as WebPack suggested for its react components - app/javascript/Home.jsx :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './home/App'

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
      <App name="React" />, document.getElementById('reactHome'))
});

import React, {Component, lazy, Suspense } from 'react';

const SkillsContainer = React.lazy(() => import('SkillsContainer'));

class App extends Component {
  render(){
    return(
        <Suspense fallback={<div>Loading...</div>}>
          <SkillsContainer/>
        </Suspense>
    )
  }
}

export default App;

import React, { Component } from 'react';
import { Doughnut } from 'react-chartjs-2/es/index'

class SkillDoughnutChart extends Component {
  constructor(props){
    super(props);
    this.state = {
      chartData:props.chartData
    }
  }

  static defaultProps = {
    displayTitle: true,
    displayLegend: true,
    legendPosition: 'right',
    chartName: 'Chart Name',
    fatSize: 90
  };

  render(){
    return (
        <Doughnut
            height={100}
            width={100}
            data={ this.state.chartData }
            options={{
              title:{
                display: this.props.displayTitle,
                text: this.props.chartName,
                fontSize: 25
              },
              legend:{
                display: this.props.displayLegend,
                position: this.props.legendPosition
              },
              centerText: {
                display: true,
                text: "280"
              },
              cutoutPercentage: this.props.fatSize
            }}
        />
    )
  }
}

export default SkillDoughnutChart

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios/index';
import ChartSkills from './ChartSkills'

class SkillsContainer extends React.Component {

  constructor(props){
    super(props);

    this.state = {
      loadingHard: true,
      hard_skills: null,
      soft_skills: null,
      chartData:{}
    };
  }

  componentDidMount() {
    axios.get('/hard-skills')
        .then( res => {
          this.setState({hard_skills: res.data, loadingHard:false});
        })
        .catch( err => {
          console.log(err)
        });
  }

  render() {
    if (!this.state.loadingHard) {
      return (
          <div className="jumbotron jumbotron-fluid m-0">
            <div className="container text-center">
              <h1 className="display-4">Hard Skills</h1>
              <p className="lead">Here is a set of my most dedicated skills(hard skills) I've developed in software engineering. This is a dynamic chart I learning something new everyday.</p>
              <p>To see all skills please visit my resume page: </p><a href="/resume">Resume Page</a>
              <hr className="my-4"/>
              <DrawHardSkills skills={this.state.hard_skills}/>
            </div>
          </div>
      );
    }
    else {
      return (
          <div>
            Loading...
          </div>
      );
    }
  }
}

const DrawHardSkills = (props) => {
  return(
      <div className="skillsWrapper">
        {props.skills.map(skill => (
            <div className="chartItem" key={skill.id}>
              <ChartSkills
                  chartData={
                    {
                      labels: [skill.name],
                      datasets: [{
                        label: '# of Votes',
                        data: [skill.percent, (100-skill.percent)],
                        backgroundColor: [
                          'rgba(25,54,65)',
                          'rgba(255, 255, 255, 0)'],
                        borderColor: [
                          'rgba(25,54,65)',
                          'rgba(255, 99, 132, 1)'],
                        borderWidth: 0}]
                    }
                  }
                  displayLegend={false}
                  chartName={skill.name}
              />
              <h3 className="floatedPercent">{skill.percent}%</h3>
            </div>
        ))
        }
      </div>
  )
};



export default SkillsContainer

.floatedPercent {
  position: relative;
  bottom: 112px;
  left: 3px;
}