JSFiddle - React, Tailwind, and code Playground

by ucdl

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/prop-types/prop-types.min.js"></script>
<script src="https://npmcdn.com/recharts/umd/Recharts.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

body {
  margin: 0;
}
#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  width: 800px;
  height: 800px;
  background-color: #fff;
}

Babel + JSX

const {ResponsiveContainer, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
      {kVp: '70', WhiteGlass: 52, XR01C: 0.332},
      {kVp: '80', WhiteGlass: 54.66, XR01C: 0.665, amt: 2210},
      {kVp: '90', WhiteGlass: 57.32, XR01C: 1, amt: 2290},
      {kVp: '100', WhiteGlass: 60, XR01C: 1.33, amt: 2000},
      {kVp: '110', WhiteGlass: 61, XR01C: 1.66, amt: 2181},
      {kVp: '120', WhiteGlass: 62, XR01C: 2, amt: 2500},

];

const CustomTooltip  = React.createClass({
  propTypes: {
    type: PropTypes.string,
    payload: PropTypes.array,
    label: PropTypes.string,
  },

  render() {
    const { active } = this.props;

    if (active) {
      const { payload, label } = this.props;
      return (
        <div className="custom-tooltip">
          <p className="label"><span className="label2">{`${label}`} kVp</span></p>
          <p className="label"><span className="labely0">White Glass: </span>{`${payload[0].value}`}</p>
          <p className="label"><span className="labely1">XR01C: </span>{`${payload[1].value}`}</p>
        </div>
      );
    }

    return null;
  }
});



const SimpleLineChart = React.createClass({
  renderColorfulLegendText(value, entry) {
  	const { color } = entry;
    
    return <span style={{ color }}>{value}</span>;
  },
	render () {
  	return (
    
    <div style={{
  paddingBottom: '56.25%', /* 16:9 */
  position: 'relative',
  height: 0
}} >
  <div style={{
    position: 'absolute',
    top: '0',
    left: '0',
    width: '100%',
    height: '100%'
  }}>
    
    
    
    <ResponsiveContainer>
    	<LineChart width={600} height={400} data={data}
            margin={{top: 50, right: 30, left: 30, bottom: 30}}>
       <CartesianGrid strokeDasharray="3 3"/>
       <XAxis dataKey="kVp" type="number" domain={[65, 125]} label={{ value: 'Peak Kilovoltage (kVp)', textAnchor: 'middle', dy:25 }} interval={0} ticks={[70, 80, 90, 100, 110, 120]} />
       <YAxis type="number" domain={[0, 80]}...