{"size": 768, "ext": "js", "max_stars_repo_path": "src/app/routes/charts/routes/bar/Components/BiaxialBarChart.js", "max_stars_repo_name": "pinkyjpainadath/ssf-ui", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/app/routes/charts/routes/bar/Components/BiaxialBarChart.js", "max_issues_repo_name": "pinkyjpainadath/ssf-ui", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/app/routes/charts/routes/bar/Components/BiaxialBarChart.js", "max_forks_repo_name": "pinkyjpainadath/ssf-ui", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 34.9090909091, "max_line_length": 106, "alphanum_fraction": 0.6419270833}
import React from 'react';
import {Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
import data from './data';

const BiaxialBarChart = () => (

  <ResponsiveContainer width="100%" height={200}>
    <BarChart data={data}
              margin={{top: 10, right: 0, left: -25, bottom: 0}}>
      <XAxis dataKey="name"/>
      <YAxis yAxisId="left" orientation="left" stroke="#03275b"/>
      <YAxis yAxisId="right" orientation="right" stroke="#ffc658"/>
      <CartesianGrid strokeDasharray="3 3"/>
      <Tooltip/>
      <Legend/>
      <Bar yAxisId="left" dataKey="pv" fill="#3367d6"/>
      <Bar yAxisId="right" dataKey="uv" fill="#ffc658"/>
    </BarChart>
  </ResponsiveContainer>
);

export default BiaxialBarChart;