D3 Basic chart

BarChart.js

import React from 'react';
import * as d3 from 'd3';
import './styles.css';

class BarChart extends React.Component {
  render() {
    const { data, width, height } = this.props;

    return (
      <React.Fragment>
        <pre>data: [{data.map((value, i) => <span key={i}>{value}, </span>)}]</pre>
        <pre>width: {width}</pre>
        <pre>height: {height}</pre>
        <div className="simple-chart"></div>
      </React.Fragment>
    );
  }

  componentDidMount() {
    this.draw2();
  }

  draw2() {
    const { data, width, height } = this.props;

    const scaleFn = d3.scaleLinear()
      .domain([0, d3.max(data)])
      .range([0, height]);

    d3.select('.simple-chart')
      .selectAll('div')
      .data(data)
      .enter()
      .append('div')
      .attr('class', 'simple-chart-item')
      .style('height', (value) => scaleFn(value) + 'px')
      .style('width', width / data.length + 'px')
      .text((data) => data);
  }
}

export default BarChart;

styles.css

.simple-chart {
  display: flex;
  align-items: flex-end;
  border: 1px solid red;
}

.simple-chart-item {
  background-color: lightgreen;
  margin: .5rem;
  border: 1px solid darkgrey;
}