recharts#YAxis JavaScript Examples

render() {
    const data = this.props.stats.assessment_result_by_day;
    return (
      <React.Fragment>
        <Card className="card-square">
          <Card.Header as="h5">Report Type Over Time</Card.Header>
          <Card.Body>
            <div style={{ width: '100%', height: '300px' }} className="recharts-wrapper">
              <ResponsiveContainer>
                <LineChart data={data}>
                  <XAxis dataKey="name" />
                  <YAxis />
                  <CartesianGrid strokeDasharray="3 3" />
                  <Legend />
                  <Tooltip />
                  <Line type="monotone" dataKey="Symptomatic Reports" stroke="#8884d8" activeDot={{ r: 8 }} />
                  <Line type="monotone" dataKey="Asymptomatic Reports" stroke="#82ca9d" />
                </LineChart>
              </ResponsiveContainer>
            </div>
          </Card.Body>
        </Card>
      </React.Fragment>
    );
  }

export default function BarGraph({ data }) {
	return (
		<div className="graph_wrapper">
			<BarChart
				width={window.screen.availWidth < 768 ? 350 : window.screen.availWidth < 1800 ? 700 : 800}
				height={window.screen.availHeight < 768 ? 300 : window.screen.availHeight < 1100 ? 550 : 600}
				data={data}
				layout="vertical"
				margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
				<XAxis ticks={[0, 1, 2, 3, 4, 5]} domain={[0, 5]} type="number" />
				<YAxis type="category" dataKey="field" />
				<CartesianGrid strokeDasharray="3 3" />
				<Tooltip />
				<Bar dataKey="score" fill="#FF7F50" />
				<Legend />
			</BarChart>
		</div>
	);
}

Chart = ({ data }) => {
  if (data.length === 0) {
    return (
      <Typography variant='h6'>
        Set your income and create some budgets!
      </Typography>
    );
  }
  return (
    <div data-testid='chart'>
      <BarChart
        width={550}
        height={300}
        data={data}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray='3 3' />
        <XAxis dataKey='category' />
        <YAxis />
        <Tooltip />
        <Bar dataKey='amount' fill='#8884d8' background={{ fill: '#eee' }} />
      </BarChart>
    </div>
  );
}

IndiaDistrictTrend = props => {
    const districtTrendData = props.districtTrendData;
    console.log('IndiaDistrictTrend', districtTrendData);
    return (
        <div style={{ display: 'flex' }}>
            <ResponsiveContainer width='100%' height={300}>
                <LineChart data={districtTrendData}
                    margin={{top: 10, right: 30, left: 0, bottom: 0}}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="date" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Line type="monotone" dataKey="active" stroke={COLOR_CODES.CATEGORIES.ACTIVE} />
                    <Line type="monotone" dataKey="recovered" stroke={COLOR_CODES.CATEGORIES.RECOVERED} />
                    <Line type="monotone" dataKey="deceased" stroke={COLOR_CODES.CATEGORIES.DEATHS} />
                </LineChart>
            </ResponsiveContainer>
        </div>
    )
}

//SIMPLE BAR CHART
export function SimpleBarChart(props)
{
  return (
    <div className='box-border shadow-lg bg-white w-full max-w-xl ml-auto mr-auto pb-5'>
      <div className='bg-gray-100 p-2 font-serif text-lg text-blue-500'>
        {props.heading}
      </div>
      <div className='justify-center -ml-1 mr-5 mt-10'>
        <BarChart width={350}
                  height={300}
                  data={props.data} style={{marginLeft:"auto", marginRight: "auto"}}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="Date" angle="295" interval={0} tickMargin={20} height={80} allowDataOverflow="true" tickSize={20}/>
          <YAxis />
          <Tooltip />
          <Bar dataKey="Cases" fill="#8884d8" />
        </BarChart>
      </div>
    </div>
    );
}

Sparkline = ({ data, color }) => (
  <div style={{ width: '100%', minWidth: '120px', height: '40px' }}>
    <ResponsiveContainer>
      <AreaChart
        data={data}
        margin={{
          top: 0, left: 0, right: 0, bottom: 0,
        }}
      >
        <YAxis
          hide
          dataKey="y"
          domain={['dataMin', 'dataMax']}
        />
        <Area
          type="monotone"
          dataKey="y"
          stroke={color}
          fill={color}
          fillOpacity={0.3}
          strokeWidth={1}
          connectNulls
        />
      </AreaChart>
    </ResponsiveContainer>
  </div>
)

render() {
    const width = 1050;
    const { mockCount, mockDateList } = this.state.chartDate;

    return (
      <div>
        <Spin spinning={this.state.showLoading}>
          <div className="statis-chart-content">
            <h3 className="statis-title">mock 接口访问总数为：{mockCount.toLocaleString()}</h3>
            <div className="statis-chart">
              <LineChart
                width={width}
                height={300}
                data={mockDateList}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <XAxis dataKey="_id" />
                <YAxis />
                <CartesianGrid strokeDasharray="7 3" />
                <Tooltip />
                <Legend />
                <Line
                  name="mock统计值"
                  type="monotone"
                  dataKey="count"
                  stroke="#8884d8"
                  activeDot={{ r: 8 }}
                />
              </LineChart>
            </div>
            <div className="statis-footer">过去3个月mock接口调用情况</div>
          </div>
        </Spin>
      </div>
    );
  }

BarCharts = observer(() => {
  return (
    <div>
      <BarChart width={730} height={250} data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="pv" fill="#8884d8" />
        <Bar dataKey="uv" fill="#82ca9d" />
      </BarChart>
    </div>
  );
})

export default function SimpleBarChart() {
  const theme = useTheme();
  return (
    <ResponsiveContainer width="100%" height={350}>
      <BarChart data={byDevice} margin={{ top: 0, right: -15, left: -30, bottom: 0 }}>
        <XAxis dataKey="month" tick={{ fontSize: 10 }} />
        <YAxis tick={{ fontSize: 10 }} />
        <Bar dataKey="mobile" barSize={5} fill={theme.palette.primary.dark} />
        <Bar dataKey="desktop" barSize={5} fill={theme.palette.success.light} />
      </BarChart>
    </ResponsiveContainer>
  );
}

function LoadChart(props) {
  const { classes, t, load } = props;

  return (
    <Paper className={classes.paper}>
      <div className={classes.root}>
        <Typography className={classes.chartTitle}>{t("Load")}</Typography>
        <ResponsiveContainer width="100%" height={200} >
          <BarChart data={load} margin={{ top: 0, right: 32, left: 10, bottom: 16 }}>
            <defs>
              <linearGradient id="gradientBlue2" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={"#2980B9"} />
                <stop offset="95%" stopColor={"#6DD5FA"} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="time" />
            <YAxis />
            <Legend />
            <Tooltip labelStyle={{ color: 'black', fontSize: 18, paddingBottom: 4 }}/>
            <Bar
              dataKey="value"
              fill="url(#gradientBlue)"/>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Paper>
  );
}

renderGraph(gridKey, title, dataKeys) {
    return (
      <div key={gridKey} style={ styles.gridCard }>
        <ResponsiveContainer>
          <LineChart 
            data={this.state.data}
            dot={false}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis tick={false} >
              <Label value={title} offset={0} style={{fill: 'green', fontSize: '1.4em'}} position="insideLeft" />
            </XAxis>
            <YAxis axisLine={false} tickLine={false} />
            <Tooltip />
            {dataKeys.map((dataKey, i) => {
              return <Line dot={false} isAnimationActive={false} key={dataKey} type="monotone" dataKey={dataKey} stroke={lineColors[i % lineColors.length]} fill={lineColors[i % lineColors.length]} />
            })}
          </LineChart >
        </ResponsiveContainer>

      </div>
    );
  }

export default function RatingsChart() {
  const theme = useTheme()

  const { loading, error, data } = useQuery(GET_DATA_QUERY)
  if (error) return <p>Sign in to view</p>
  if (loading) return <p>Loading</p>

  return (
    <React.Fragment>
      <Title>Average City Property Value</Title>
      <ResponsiveContainer>
        <BarChart
          data={data.cityValues}
          margin={{
            top: 16,
            right: 16,
            bottom: 0,
            left: 24,
          }}
        >
          <XAxis dataKey="city" stroke={theme.palette.text.secondary} />
          <YAxis stroke={theme.palette.text.secondary}>
            <Label
              angle={270}
              position="left"
              style={{ textAnchor: 'middle', fill: theme.palette.text.primary }}
            >
              City
            </Label>
          </YAxis>
          <Bar dataKey="average" fill={theme.palette.primary.main}></Bar>
        </BarChart>
      </ResponsiveContainer>
    </React.Fragment>
  )
}

ChartColumn = () => (
  <ResponsiveContainer>
    <BarChart
      data={data}
      height={300}
      width={400}
    >
      <XAxis dataKey="name" />
      <YAxis />
      <Bar
        dataKey="value"
        fill="#8884d8"
        isAnimationActive={false}
      />
    </BarChart>
  </ResponsiveContainer>
)

render() {
    

    return (    
        <LineChart
        width={700}
        height={500}
        data={this.state.data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip content={<CustomTooltip/>}/>
        <Legend />
        {countryList.map(country =>
             <Line
             type="monotone"
             dataKey={country}
             stroke={'#'+Math.floor(Math.random()*16777215).toString(16)}
             dot={false}
           />
          )}
      </LineChart>
      
    );
  }

render() {
        const { airline_delays, delays_comparison } = this.state;

        return (
            <div className="charts-main">
                <div className="form-sub-header">
                    { !!(this.props.airline) ? this.props.airline.name : ''}
                </div>
                <div>
                    <div className="inline-div-50">
                        <p class="charts-title">Delay % By Type</p>
                        <PieChart className="form-content" width={400} height={300}>
                            <Pie isAnimationActive={false} data={airline_delays} cx={200} cy={125} outerRadius={80} fill="#8884d8" label>
                                {
                                    airline_delays.map((entry, index) => (
                                        <Cell key={`cell-${index}`} fill={this.colors[index]}/>
                                    ))
                                }
                            </Pie>
                            <Tooltip/>
                            <Legend align="center" />
                        </PieChart>
                    </div>
                    <div className="inline-div-50">
                        <p class="charts-title">Airline (avg minutes) delays vs. All (avg minutes) delays </p>
                        <BarChart className="Form-content" width={400} height={300} data={delays_comparison}>
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis dataKey="name" />
                            <YAxis />
                            <Tooltip />
                            <Legend align="center" />
                            <Bar dataKey="Target" fill="#96DDCF" />
                            <Bar dataKey="Average" fill="#0E6488" />
                        </BarChart>
                    </div>
                </div>
            </div>
        );
    }

MainSurveyBar = ({ datas, title, style }) => {
  const sorted = datas.slice(0).sort(function (a, b) {
    return a.count > b.count ? -1 : a.count < b.count ? 1 : 0
  })

  const getColor = (i) => {
    return i > 4 ? COLORS[4] : COLORS[i]
  }

  return (
    <div className="main-survey-bar" style={style}>
      <div className="main-survey-bar-title">{title}</div>
      <BarChart width={374} height={220} data={datas} barSize={15} margin={{ right: 5, left: -35 }} style={{ marginTop: 10, marginBottom: 30 }}>
        <XAxis interval={0} dataKey="name" tick={<CustomizedAxisTick />} scale="point" padding={{ left: 10, right: 10 }} width={3} />
        <YAxis valueKey="count" fontSize={10} />
        <Tooltip />
        <CartesianGrid strokeDasharray="3 3" />
        <Bar dataKey="count" fill="#8884d8" background={{ fill: '#eee' }}>
          {datas.map((entry, index) => {
            const color = getColor(sorted.indexOf(entry))
            return <Cell key={index} fill={color} />
          })}
        </Bar>
      </BarChart>
    </div>
  )
}

export default function TodayWidget() {
  const theme = useTheme();

  return (
    <Box display="flex" flexDirection="column" flex={1}>
      <Typography component="h2" variant="h6" color="primary" gutterBottom>
        Today
      </Typography>
      <ResponsiveContainer>
        <LineChart
          data={data}
          margin={{
            top: 16,
            right: 16,
            bottom: 0,
            left: 24,
          }}
        >
          <XAxis dataKey="time" stroke={theme.palette.text.secondary} />
          <YAxis stroke={theme.palette.text.secondary}>
            <Label
              angle={270}
              position="left"
              style={{ textAnchor: 'middle', fill: theme.palette.text.primary }}
            >
              Sales ($)
            </Label>
          </YAxis>
          <Line type="monotone" dataKey="amount" stroke={theme.palette.primary.main} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </Box>
  );
}

render() {
    return (
      <div style={{ width: "99%", height: 300 }}>
        <ResponsiveContainer>
          <BarChart
            data={data}
            margin={{
              top: 10,
              right: 30,
              left: 0,
              bottom: 0,
            }}
            barSize={16}
          >
            <XAxis
              dataKey="name"
              scale="point"
              padding={{ left: 10, right: 10 }}
            />
            <YAxis />
            <Tooltip />
            <Legend />
            <CartesianGrid strokeDasharray="3 3" />
            <Bar dataKey="sales" fill="#8884d8" background={{ fill: "#eee" }} />
          </BarChart>
        </ResponsiveContainer>
      </div>
    );
  }

export default function QtyPublishedProducts({ products, keywords }) {
  if (!products) {
    return <div> Loading ... </div>;
  }

  const lines = keywords.map((item, index) => ({
    keyword: item,
    fill: colors[index],
  }));

  return (
    <ResponsiveContainer height={300}>
      <LineChart data={products}>
        <CartesianGrid strokeDasharray='5 5' />
        <XAxis dataKey='date' />
        <YAxis />
        <Tooltip />
        {lines.map(({ keyword, fill }) => {
          return (
            <Line
              key={keyword.replace(' ', '-')}
              dataKey={`"${keyword}"`}
              fill={fill}
              stroke={fill}
            />
          );
        })}
      </LineChart>
    </ResponsiveContainer>
  );
}

LineChartWithXAxisPading = (data) => (
  <ResponsiveContainer width="100%" height={data.height} data-test="responsive-component">
    <LineChart data-test="linechart-component" data={data.data} margin={{top: 10, right: 0, left: -15, bottom: 0}}>
      <XAxis dataKey="month" padding={{left: 30, right: 30}}/>
      <YAxis/>
      <CartesianGrid strokeDasharray="3 3"/>
      <Tooltip/>
      <Legend/>
      <Line type="monotone" dataKey="deliveries" stroke="#3367d6" activeDot={{r: 8}}/>
      {/* <Line type="monotone" dataKey="Drone" stroke="#ffc658"/> */}
    </LineChart>
  </ResponsiveContainer>
)

GreeksChart = (props) => {
	return(
		<LineChart
			width={900}
			height={500}
			data={props.data}
			margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
		>
			<CartesianGrid strokeDasharray="3 3" />
			<XAxis dataKey="strike">
				<Label value="Strike price" offset={0} position="insideBottom"/>
			</XAxis>
			<YAxis label={{ value: 'Value', angle: -90, position: 'insideLeft', textAnchor: 'middle' }}/>
			<Tooltip />
			<Legend />
			<Line type="monotone" dataKey="delta" stroke="rgba(0, 123, 255, 1)" />
			<Line type="monotone" dataKey="gamma" stroke="rgba(255, 230, 70, 1)" />
			<Line type="monotone" dataKey="theta" stroke="rgba(40, 167, 69, 1)" />
			<Line type="monotone" dataKey="vega" stroke="rgba(255, 7, 58, 1)" />

		</LineChart>
	)
}

UserActivityStatsWidget = () => {
    const [auditLogStats] = useFetch('/auditlog/stats')

    return <DashboardWidget title="User activity over time">

        {auditLogStats && auditLogStats.length > 0 ?
            <LineChart width={320} height={320} data={auditLogStats}>
                <Line type="monotone" dataKey="total" stroke="var(--primary-color)" strokeWidth="var(--borderWidth)" />
                <CartesianGrid stroke="var(--bg-color)" />
                <XAxis dataKey="log_date" />
                <YAxis dataKey="total" />
            </LineChart> :
            <p>No enough data to generate the chart.</p>
        }
    </DashboardWidget>
}

AnnualIncidentsChart = () => {
    const currentUser = getSession();
    const incidentService = new IncidentService();
    const [annualIncidentCount, setAnnualIncidentCount] = useState([]);

    useEffect(() => {
        const orgId = currentUser.org_id;
        incidentService.getMonthlyIncidentCount(orgId).then((res) => {
            setAnnualIncidentCount(res);
        });
    }, []);

    return (
        <MDBCard className="annual-incidents-chart-container">
            <MDBCardBody>
                <p className="text-center font-weight-bold">
                    Dengue Incidents Reported Over the year
                </p>
                <ResponsiveContainer width="100%" height={250}>
                    <LineChart data={annualIncidentCount}>
                        <XAxis dataKey="name" />
                        <YAxis />
                        <Tooltip />
                        <Line
                            type="monotone"
                            dataKey="count"
                            strokeWidth={3}
                            stroke="#0783EC"
                            fill="#0783EC"
                        />
                    </LineChart>
                </ResponsiveContainer>
            </MDBCardBody>
        </MDBCard>
    );
}

function GrowthAreaChart ({ data, xName, title }) {
  return (
    <ResponsiveContainer width='100%' height={300} minWidth={300}>
      <AreaChart
        data={data}
        margin={{
          top: 5,
          right: 5,
          left: 0,
          bottom: 0
        }}
      >
        <XAxis
          dataKey='time' tickFormatter={dateFormatter} name={xName}
          tick={{ fill: 'var(--theme-grey)' }}
        />
        <YAxis tickFormatter={formatSats} tick={{ fill: 'var(--theme-grey)' }} />
        <Tooltip labelFormatter={dateFormatter} contentStyle={{ color: 'var(--theme-color)', backgroundColor: 'var(--theme-body)' }} />
        <Legend />
        {Object.keys(data[0]).filter(v => v !== 'time' && v !== '__typename').map((v, i) =>
          <Area key={v} type='monotone' dataKey={v} name={v} stackId='1' stroke={COLORS[i]} fill={COLORS[i]} />)}
      </AreaChart>
    </ResponsiveContainer>
  )
}

TimeChart = ({ chartData, classes }) => (
  <div>
    <Card>
      <CardContent className={classes.content}>
        <ResponsiveContainer width="100%" height={255}>
          <ScatterChart>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="datetime" className="datetime" />
            <YAxis domain={[0, chartData.dataMax]} dataKey="count" />
            <Tooltip cursor={{ strokeDasharray: '3 3' }} />
            <Scatter
              className="datetime"
              data={chartData.displayData}
              line={{}}
            />
          </ScatterChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  </div>
)

Histogram = (props) => {
  const { discrete, labels, values } = props
  const data = values.map((value, index) => {
    const label = labels[index]
    return {
      x: discrete ? label.toString() : label.toFixed(DISPLAY_DECIMAL_LENGTH),
      y: value
    }
  })
  return (
    <ResponsiveContainer width='100%' height={400}>
      <BarChart
        data={data}
        width={500}
        height={300}
        margin={{ top: 0, bottom: 30 }}
      >
        <CartesianGrid strokeDasharray='3 3' />
        <XAxis
          dataKey='x'
          label={{
            value: props.xLabel,
            position: 'insideBottom',
            offset: -20
          }}
        />
        <YAxis
          label={{
            value: props.yLabel,
            angle: -90,
            position: 'insideLeft'
          }}
        />
        <Tooltip />
        <Bar dataKey='y' fill='#2980b9' />
      </BarChart>
    </ResponsiveContainer>
  )
}

BarGraph = props => {
  const {
    data,
    dataKey1,
    dataKey2,
    height,
    margin,
    maxHeight,
    strokeColor1,
    strokeColor2,
    title,
    width,
    xAxisKey
  } = props;

  return (
    <div className='graph'>
      <p className='title'>{title}</p>
      <BarChart
        width={width}
        height={maxHeight > 0 ? (
          height <= maxHeight ? height : maxHeight
        ) : height}
        data={data}
        margin={margin}
      >
        <CartesianGrid strokeDasharray="5 5" />
        <XAxis dataKey={xAxisKey} />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey={dataKey1} fill={strokeColor1} />
        <Bar dataKey={dataKey2} fill={strokeColor2} />
      </BarChart>
    </div>
  );
}

export default function FeesChart(props) {
  const {
    data,
    loading,
    chartHeight,
    yaxisWidth,
    xaxisTickFormatter,
    yaxisTickFormatter,
    tooltipFormatter,
    tooltipLabelFormatter
  } = props

  const csvFields = [
    // {key: 'swap', name: 'Swap'},
    {key: 'margin', name: 'Margin trading'},
    {key: 'mint', name: 'Mint ALP'},
    {key: 'burn', name: 'Burn ALP'},
    {key: 'liquidation', name: 'Liquidation'},
    {key: 'cumulative', name: 'Cumulative'}
  ]

  return <ChartWrapper title="Fees" loading={loading} csvFields={csvFields} data={data}>
    <ResponsiveContainer width="100%" height={chartHeight}>
      <ComposedChart data={data} syncId="syncA">
        <CartesianGrid strokeDasharray="3 3" stroke='#333333' />
        <XAxis dataKey="timestamp" tickFormatter={xaxisTickFormatter} minTickGap={30} />
        <YAxis dataKey="all" interval="preserveStartEnd" tickCount={7} tickFormatter={yaxisTickFormatter} width={yaxisWidth} />
        <YAxis dataKey="cumulative" orientation="right" yAxisId="right" tickFormatter={yaxisTickFormatter} width={yaxisWidth} />
        <Tooltip
          formatter={tooltipFormatter}
          labelFormatter={tooltipLabelFormatter}
          contentStyle={{ textAlign: 'left' }}
        />
        <Legend />
        {/* <Bar isAnimationActive={false} type="monotone" dataKey="swap" stackId="a" name="Swap" fill={COLORS[0]} /> */}
        <Bar isAnimationActive={false} type="monotone" dataKey="mint" stackId="a" name="Mint ALP" fill={COLORS[1]} />
        <Bar isAnimationActive={false} type="monotone" dataKey="burn" stackId="a" name="Burn ALP" fill={COLORS[2]} />
        <Bar isAnimationActive={false} type="monotone" dataKey="liquidation" stackId="a" name="Liquidation" fill={COLORS[3]} />
        <Bar isAnimationActive={false} type="monotone" dataKey="margin" stackId="a" name="Margin trading" fill={COLORS[4]} />
        <Line isAnimationActive={false} type="monotone" strokeWidth={3} dot={false} stroke={COLORS[0]} dataKey="cumulative" yAxisId="right" name="Cumulative" />
      </ComposedChart>
    </ResponsiveContainer>
    <div className="chart-description">
      Collected fees. USD value is calculated with token price at the moment of swap, trade, minting or redeeming ALP
    </div>
  </ChartWrapper>
}

renderBarGraph() {
    return (
      <div className="mx-3 mt-2">
        <ResponsiveContainer width="100%" height={400}>
          <BarChart
            width={500}
            height={300}
            data={this.ageData}
            margin={{
              top: 20,
              right: 30,
              left: 20,
              bottom: 5,
            }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="High" stackId="a" fill="#FA897B" />
            <Bar dataKey="Medium" stackId="a" fill="#FFDD94" />
            <Bar dataKey="Low" stackId="a" fill="#D0E6A5" />
            <Bar dataKey="No Identified Risk" stackId="a" fill="#333" />
            <Bar dataKey="Missing" stackId="a" fill="#BABEC4" />
          </BarChart>
        </ResponsiveContainer>
        <ResponsiveContainer width="100%" height={400}>
          <BarChart
            width={500}
            height={300}
            data={this.sexData}
            margin={{
              top: 20,
              right: 30,
              left: 20,
              bottom: 5,
            }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="High" stackId="a" fill="#FA897B" />
            <Bar dataKey="Medium" stackId="a" fill="#FFDD94" />
            <Bar dataKey="Low" stackId="a" fill="#D0E6A5" />
            <Bar dataKey="No Identified Risk" stackId="a" fill="#333" />
            <Bar dataKey="Missing" stackId="a" fill="#BABEC4" />
          </BarChart>
        </ResponsiveContainer>
      </div>
    );
  }