recharts#Bar JavaScript Examples

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>
  )
}

//STACKED BAR CHART
export function StackedBarChart(props)
{
  return (
    <div className='box-border shadow-lg bg-white m-4 w-auto inline-block'>
      <div className='bg-gray-100 p-4 text-lg text-blue-500'>
        {props.heading}
      </div>
      <div className='justify-center p-4'>
        <BarChart width={500}
                  height={300}
                  data={props.data}
                  margin={{
                    top: 20, right: 30, left: 20, bottom: 5,
                  }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Bar dataKey="pv" stackId="a" fill="#8884d8" />
          <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
        </BarChart>
      </div>
    </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>
  );
}

//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>
    );
}

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>
  );
}

Chart = ({ data }) => {
  if (data.length === 0) {
    return (
      <Typography variant='title'>
        Set your income and create some budgets!
      </Typography>
    );
  }
  return (
    <div id='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>
  );
}

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>
	);
}

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

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>
        );
    }

render() {
    const data = this.props.stats.monitoring_distribution_by_day;
    return (
      <React.Fragment>
        <Card className="card-square">
          <Card.Header as="h5">Monitoring Distribution by Day</Card.Header>
          <Card.Body>
            <h5 className="pb-4">DISTRIBUTION OF MONITOREES UNDER MONITORING</h5>
            <div style={{ width: '100%', height: '286px' }} className="recharts-wrapper">
              <ResponsiveContainer>
                <BarChart data={data}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="day">
                    <Label value="Day of Monitoring" position="insideBottom" offset={-3} />
                  </XAxis>
                  <YAxis
                    label={
                      <Text x={-30} y={60} dx={50} dy={150} offset={0} angle={-90}>
                        Number of Monitorees
                      </Text>
                    }
                  />
                  <Bar dataKey="cases" fill="#0E4F6D" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </Card.Body>
        </Card>
      </React.Fragment>
    );
  }

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>
  )
}

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>
    );
  }

render() {
    return (
      <React.Fragment>
        <Card className="card-square">
          <Card.Header as="h5">Total Assessments Over Time</Card.Header>
          <Card.Body>
            <div style={{ width: '100%', height: '286px' }} className="recharts-wrapper">
              <ResponsiveContainer>
                <BarChart data={this.data}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <Tooltip />
                  <YAxis
                    label={
                      <Text x={-30} y={60} dx={50} dy={150} offset={0} angle={-90}>
                        Number of Monitorees
                      </Text>
                    }
                  />
                  <Bar dataKey="Asymptomatic Assessments" stackId="a" fill="#39CC7D" />
                  <Bar dataKey="Symptomatic Assessments" stackId="a" fill="#FF6868" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </Card.Body>
        </Card>
      </React.Fragment>
    );
  }

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

  const data =
    products &&
    products.map((item, index) => ({ ...item, fill: colors[index] }));

  return (
    <ResponsiveContainer height={300}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray='5 5' />
        <XAxis dataKey='_id' />
        <YAxis />
        <Tooltip />
        <Bar dataKey={dataKey} fill='fill' />
      </BarChart>
    </ResponsiveContainer>
  );
}

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>
  );
}

render() {

        const { classes, coins_markets } = this.state;

        const data_bar = coins_markets.map(function(data, key, array){

            return {
                name: data.name,
                changes: data.price_change_percentage_1y_in_currency
            };

        });

        return (
            <div className={classes.cardContainer}>
                <Fade in>
                    <Card className={classes.performanceCard}>
                        <CardHeader title={t( "components.dashboard_bar_chart.title")} />
                        <CardContent>
                            {
                                data_bar.length ?
                                    <Fade in>
                                        <div className={classes.barChart}>
                                            <ResponsiveContainer>
                                                <BarChart
                                                    width={400}
                                                    height={475}
                                                    data={data_bar}
                                                >
                                                    <CartesianGrid strokeDasharray="3 3" />
                                                    <XAxis dataKey="name" interval={0} angle={90} height={75} dy={10} textAnchor="start"/>
                                                    <YAxis tickFormatter={value => this._percent_formatter(value, true)} />
                                                    <Tooltip formatter={value => this._percent_formatter(value, true)} />
                                                    <ReferenceLine y={0} stroke="#000" />
                                                    <Bar dataKey="changes" fill="#131162" />
                                                </BarChart>
                                            </ResponsiveContainer>
                                        </div>
                                    </Fade>:
                                    <Fade in timeout={300}>
                                        <Skeleton height={475}/>
                                    </Fade>
                            }
                        </CardContent>
                    </Card>
                </Fade>
            </div>
        );
    }

Chart = () => {
	const theme = useTheme();

	const date = useRef(new Date().toISOString());
	const { tickets } = useTickets({ date: date.current });

	const [chartData, setChartData] = useState([
		{ time: "08:00", amount: 0 },
		{ time: "09:00", amount: 0 },
		{ time: "10:00", amount: 0 },
		{ time: "11:00", amount: 0 },
		{ time: "12:00", amount: 0 },
		{ time: "13:00", amount: 0 },
		{ time: "14:00", amount: 0 },
		{ time: "15:00", amount: 0 },
		{ time: "16:00", amount: 0 },
		{ time: "17:00", amount: 0 },
		{ time: "18:00", amount: 0 },
		{ time: "19:00", amount: 0 },
	]);

	useEffect(() => {
		setChartData(prevState => {
			let aux = [...prevState];

			aux.forEach(a => {
				tickets.forEach(ticket => {
					format(startOfHour(parseISO(ticket.createdAt)), "HH:mm") === a.time &&
						a.amount++;
				});
			});

			return aux;
		});
	}, [tickets]);

	return (
		<React.Fragment>
			<Title>{`${i18n.t("dashboard.charts.perDay.title")}${
				tickets.length
			}`}</Title>
			<ResponsiveContainer>
				<BarChart
					data={chartData}
					barSize={40}
					width={730}
					height={250}
					margin={{
						top: 16,
						right: 16,
						bottom: 0,
						left: 24,
					}}
				>
					<CartesianGrid strokeDasharray="3 3" />
					<XAxis dataKey="time" stroke={theme.palette.text.secondary} />
					<YAxis
						type="number"
						allowDecimals={false}
						stroke={theme.palette.text.secondary}
					>
						<Label
							angle={270}
							position="left"
							style={{ textAnchor: "middle", fill: theme.palette.text.primary }}
						>
							Tickets
						</Label>
					</YAxis>
					<Bar dataKey="amount" fill={theme.palette.primary.main} />
				</BarChart>
			</ResponsiveContainer>
		</React.Fragment>
	);
}

function TimeseriesBarChart({ name, data, dataKeys, colors }) {
  const { mode } = useContext(WindmillContext);

  return (
    <div>
      <SectionTitle>{name}</SectionTitle>
      <Card className="mb-8">
        <CardBody>
          <ResponsiveContainer height={400}>
            <BarChart
              data={data}
              margin={{
                top: 20,
                right: 10,
                left: -10,
                bottom: 5,
              }}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip
                cursor={false}
                contentStyle={{
                  backgroundColor:
                    mode === "dark"
                      ? "var(--color-gray-800)"
                      : "var(--color-gray-100)",
                  color:
                    mode === "dark"
                      ? "var(--color-gray-100)"
                      : "var(--color-gray-800)",
                  borderRadius: "0.5rem",
                  borderStyle: "none",
                }}
              />
              <Legend
                wrapperStyle={{
                  color:
                    mode === "dark"
                      ? "var(--color-gray-100)"
                      : "var(--color-gray-800)",
                }}
              />
              {dataKeys.map((k, i) => (
                <Bar key={k} dataKey={k} stackId="a" fill={colors[i]} />
              ))}
            </BarChart>
          </ResponsiveContainer>
        </CardBody>
      </Card>
    </div>
  );
}

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

        if(this.state.toProjectSummary === true) {
            return <Redirect to={{pathname: `/projects/${this.props.projectNameSlug}`}}/>
        }

        return (
            <div className={classes.container}>
                <SideBar 
                    projectNameSlug={this.props.projectNameSlug}
                    projectName={this.props.projectName}
                />
                <div className={classes.main_div}>
                    <Box my={2}>
                        <Typography variant="h4">Sentiment rule</Typography>
                    </Box>
                                {this.state.data && 
                                    <div style={{width: '100%', overflowX: 'scroll'}}>
                                        <BarChart
                                            width={800}
                                            height={300}
                                            data={this.state.data}
                                            margin={{
                                                top: 5, right: 30, left: 20, bottom: 5,
                                            }}
                                            >
                                            <CartesianGrid strokeDasharray="3 3" />
                                            <XAxis dataKey="score" />
                                            <YAxis />
                                            <Tooltip />
                                            <Legend />
                                            <Bar dataKey="positive" fill="#8884d8" />
                                            <Bar dataKey="negative" fill="#82ca9d" />
                                            <Bar dataKey="neutral" fill="#98af1d" />
                                        </BarChart>
                                    </div>
                                }
                    <form onSubmit={(e) => {e.preventDefault(); this.setRule(e.target.elements, uuid(), 0)}}>
                        <RuleDefinitionBox
                            classes={classes}
                            setScoreValue={this.setScoreValue}
                            score_value={this.state.score_value}
                        />
                        <br/>
                        <ClassDefinitionBox
                            classes={classes}
                            classNames={this.props.classNames || []}
                            setClass={this.setClass}
                        />
                        <RuleSubmit
                            setRuleName={this.setRuleName}
                            rule_name={this.state.rule_name}
                            loading={this.state.loading}
                            classes={classes}
                        />
                    </form>
                </div>
        </div>
        );
    }

MiniBarPlot = ({ barDailyData, type, fill }) => {
  const renderCustomizedLabel = (props) => {
    const { x, y, width, value } = props;
    const radius = 11;

    return (
      <g>
        <circle cx={x + width / 2} cy={y - radius} r={radius} fill={fill} />
        <text
          x={x + width / 2}
          y={y - radius}
          fill="#fff"
          textAnchor="middle"
          dominantBaseline="middle"
        >
          {value}
        </text>
      </g>
    );
  };
  return (
    <ResponsiveContainer aspect={1} width="100%" height="100%">
      <BarChart
        data={barDailyData.slice(barDailyData.length - 7, barDailyData.length)}
        margin={{
          top: 53,
          bottom: -15,
        }}
      >
        <XAxis
          dataKey="date"
          tick={{
            stroke: fill,
            fill: fill,
            strokeWidth: 0.2,
          }}
          interval={0}
          axisLine={{ color: "rgba(255,255,255,0)", strokeWidth: 0 }}
          style={{ fontSize: "0.5rem", fontFamily: "notosans" }}
          tickSize={5}
          tickLine={{ stroke: fill }}
        />
        <YAxis hide={true} />
        <Tooltip
          contentStyle={{
            background: "rgba(255,255,255,0)",
            color: "rgba(62, 77, 163, 1)",
            border: "none",
            borderRadius: "5px",
            fontSize: "10px",
            fontFamily: "notosans",
            textTransform: "uppercase",
            textAlign: "left",
            lineHeight: 0.8,
          }}
          active={true}
          cursor={{ fill: "transparent" }}
          position={{ x: -5, y: 0 }}
        />
        <Bar
          dataKey="stateid"
          name={type}
          fill={fill}
          radius={[5, 5, 0, 0]}
          barSize={20}
        >
          {type !== "active" && (
            <LabelList dataKey="label" content={renderCustomizedLabel} />
          )}
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}

function MemoryChart(props) {
  const { classes, disks } = props;

  const DiskTooltip = tooltipProps => {
    if (tooltipProps && tooltipProps.payload && tooltipProps.payload.length > 0) {
      const { percent, device, filesystem } = tooltipProps.payload[0].payload;
      const newPayload = [
        { name: 'Percentage', value: percent },
        { name: 'Device', value: device },
        { name: 'Filesystem', value: filesystem },
      ];
      return <DefaultTooltipContent
        labelStyle={{ color: 'black', fontSize: 18, paddingBottom: 4 }}
        payload={newPayload}
      />;
    }
    return <DefaultTooltipContent {...tooltipProps} />;
  };

  return (
    <div className={classes.root}>
      <Typography className={classes.chartTitle}>Disks</Typography>
      <ResponsiveContainer width="100%" height={200}>
        <BarChart
          data={disks}
          margin={{ top: 0, right: 32, left: 40, bottom: 4 }}
        >
          <defs>
            <linearGradient id="gradientGreen" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={"#56ab2f"} stopOpacity={1}/>
              <stop offset="95%" stopColor={"#a8e063"} stopOpacity={1}/>
            </linearGradient>
          </defs>
          <XAxis type="category" dataKey="mountpoint" tick={{ fontSize: 12, wordBreak: 'break-all' }}/>
          <YAxis type="number"/>
          <Tooltip
            isAnimationActive={false}
            content={<DiskTooltip />}
          />
          <Bar
            dataKey="percent"
            stackId="a"
            isAnimationActive={false}
          >
            {disks.map((entry, index) =>
              <Cell
                key={`cell-${index}`}
                fill={entry.percent > 90 ? red['500'] : entry.percent > 80 ? orange['500'] : "url(#gradientGreen)"}
              />
            )}
            <LabelList
              dataKey="label"
              position="insideBottom"
              angle={-90}
              offset={100}
              style={{ fill: "black", fontWeight: 500 }}
            />
          </Bar>
          <Bar
            dataKey="freePercent" 
            stackId="a"
            fill={"rgba(0, 0, 0, 0)"}
            isAnimationActive={false}
          />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

Chart = ({ mainpageData }) => { 

    let chartData = [];
    mainpageData.map(obj => {
      if(obj.chartData.length !== 0) {
        chartData.push(obj.chartData);
      } 
    })
    // if chartData is empty use initial data from constants
    if (chartData.length === 0) {
      chartData = data
    }
    return (
      <div
        className="chart-wrapper"
        style={{
          backgroundColor: "#f2f2f2",
          width: "90%",
          margin: "0 auto",
          padding: "0.8em",
          borderRadius: "2px",
          color: "#333"
        }}
      >
        <div>
          <h4 style={{ marginBottom: "0.2em" }}>Employment Rate</h4>
          <span style={{ fontStyle: "italic", fontSize: "11px" }}>
            Based on reviews
          </span>
        </div>
        <ResponsiveContainer width={"100%"} height={520}>
          <ComposedChart
            layout="vertical"
            data={chartData}
            margin={{
              top: 20,
              right: 80,
              bottom: 20,
              left: 120
            }}
          >
            <CartesianGrid stroke="#f7b0c8" />
            <XAxis type="number" />
            <YAxis dataKey="name" type="category" />
            <Tooltip />
            <Bar dataKey="rate" barSize={10} fill="#c3352b" />
          </ComposedChart>
        </ResponsiveContainer>
      </div>
    );
  }

TopNTodayDeath = props => {
    const data = props.data;
    const TOP_N = 5;
    const DANGER_COLOR_SHADES = [
        "rgba(255, 0, 0, 1.0)",
        "rgba(255, 0, 0, 0.8)",
        "rgba(255, 0, 0, 0.6)",
        "rgba(255, 0, 0, 0.4)",
        "rgba(255, 0, 0, 0.2)"
    ];
    let refinedData = [];
   
    let sortedData = data.sort((a, b) => b.todayDeaths - a.todayDeaths);
    let cloned = JSON.parse(JSON.stringify(sortedData));
    let topNData = cloned.splice(0, TOP_N);

    topNData.forEach(element => {
        let obj = {};
        obj['country'] = element['country'];
        obj['Today Deaths'] = element['todayDeaths'];
        refinedData.push(obj);
    });

    return (
        <div className="top-n-todays-death-widget">
            <Card >
                <Card.Body>
                    <Card.Title>Countries with maximum Deaths Today</Card.Title>
                    <Card.Subtitle className="mb-2 text-muted">Number of Countries: <b>{TOP_N}</b></Card.Subtitle>
                    <div>
                        <ResponsiveContainer width='100%' height={330}>
                            <BarChart
                                data={refinedData}
                                margin={{
                                    top: 30, right: 0, left: 0, bottom: 5,
                                }}
                            >
                                <CartesianGrid strokeDasharray="3 3" />
                                <XAxis dataKey="country" />
                                <YAxis />
                                <Tooltip />
                                <Legend />
                                <Bar dataKey="Today Deaths" fill="rgba(255, 0, 0, 1.0)" label={{ position: 'top' }}>
                                    {
                                        refinedData.map((entry, index) => (
                                            <Cell key={`cell-${index}`} fill={DANGER_COLOR_SHADES[index % 20]} />
                                        ))
                                    }
                                </Bar>
                            </BarChart>
                        </ResponsiveContainer>
                    </div>
                </Card.Body>
            </Card>
        </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>
    );
  }

render() {
    const { data, isLoading, dataKey, stroke } = this.props;
    let result;
    try {
      const updatedData = data.slice(1).slice(-50);
      result = updatedData.map((dataItem) => {
        let newObject = {};
        for (let [key, value] of Object.entries(dataItem)) {
          if (key === "date") {
            newObject[key] = value;
          } else {
            newObject[key] = Number(value);
          }
        }
        return {
          ...newObject,
          totalactive:
            newObject.totalconfirmed -
            (newObject.totalrecovered + newObject.totaldeceased),
        };
      });
    } catch (err) { }

    return (
      <div className="barcharts">
        {!isLoading && (
          <BarChart
            width={350}
            height={150}
            data={result}
            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
          >
            <XAxis dataKey="date" />
            <YAxis />
            <Tooltip />
            <Bar dataKey={dataKey} fill={stroke} />
          </BarChart>
        )}
      </div>
    );
  }

Chart = ({ data, chartOption, currencyUnit, symbol }) => {
  const [chartData, setChartData] = useState([])
  useEffect(() => {
    setChartData([])
    setChartData(data)
  }, [data, chartOption, currencyUnit])

  const isMobile = useMedia('(max-width: 40em)')
  if (chartOption === 'price' && chartData && data) {
    return (
      <ChartWrapper>
        <ResponsiveContainer aspect={isMobile ? 60 / 22 : 60 / 12}>
          <AreaChart margin={{ top: 0, right: 0, bottom: 6, left: 10 }} barCategoryGap={1} data={chartData}>
            <CartesianGrid stroke="#f5f5f5" />
            <XAxis
              tickLine={false}
              axisLine={false}
              interval="preserveEnd"
              tickMargin={14}
              minTickGap={80}
              tickFormatter={(tick) => toNiceDate(tick)}
              dataKey="dayString"
            />
            <YAxis
              hide={isMobile}
              type="number"
              tickMargin={16}
              orientation="left"
              tickFormatter={(tick) => toK(tick)}
              axisLine={false}
              tickLine={false}
              interval="preserveEnd"
              minTickGap={80}
              yAxisId={2}
            />
            <YAxis
              hide={true}
              type="number"
              tickMargin={16}
              orientation="left"
              tickFormatter={(tick) => toK(tick)}
              axisLine={false}
              tickLine={false}
              interval="preserveEnd"
              minTickGap={80}
              yAxisId={3}
            />
            <Area
              strokeWidth={2}
              dot={false}
              type="monotone"
              name={currencyUnit === 'ETH' ? 'Price (ETH/' + symbol + ')' : 'Price (USD/' + symbol + ')'}
              dataKey={currencyUnit === 'ETH' ? 'ethPerToken' : 'tokenPriceUSD'}
              yAxisId={2}
              fill="var(--c-token)"
              opacity={'0.4'}
              stroke="var(--c-token)"
            />
            <Area
              strokeWidth={2}
              dot={false}
              type="monotone"
              name={currencyUnit === 'USD' ? 'Inverse (' + symbol + '/USD)' : 'Inverse (' + symbol + '/ETH)'}
              dataKey={currencyUnit === 'USD' ? 'tokensPerUSD' : 'tokensPerEth'}
              yAxisId={3}
              fill="var(--c-token)"
              opacity={'0'}
              stroke="var(--c-token)"
            />
            <Tooltip
              cursor={true}
              formatter={(val) => toK(val, true)}
              labelFormatter={(label) => toNiceDateYear(label)}
              labelStyle={{ paddingTop: 4 }}
              contentStyle={{
                padding: '10px 14px',
                borderRadius: 10,
                borderColor: 'var(--c-zircon)',
              }}
              wrapperStyle={{ top: -70, left: -10 }}
            />
          </AreaChart>
        </ResponsiveContainer>
      </ChartWrapper>
    )
  }
  if (chartOption !== 'volume' && chartData && data) {
    return (
      <ChartWrapper>
        <ResponsiveContainer aspect={isMobile ? 60 / 22 : 60 / 12}>
          <AreaChart margin={{ top: 0, right: 0, bottom: 6, left: 10 }} barCategoryGap={1} data={chartData}>
            <CartesianGrid stroke="#f5f5f5" />
            <XAxis
              tickLine={false}
              axisLine={false}
              interval="preserveEnd"
              tickMargin={14}
              minTickGap={80}
              tickFormatter={(tick) => toNiceDate(tick)}
              dataKey="dayString"
            />
            <YAxis
              hide={isMobile}
              type="number"
              tickMargin={16}
              orientation="left"
              tickFormatter={(tick) => toK(tick)}
              axisLine={false}
              tickLine={false}
              interval="preserveEnd"
              minTickGap={80}
              yAxisId={0}
            />
            <YAxis
              hide={true}
              type="number"
              tickMargin={16}
              orientation="right"
              tickFormatter={(tick) => toK(tick)}
              axisLine={false}
              tickLine={false}
              interval="preserveEnd"
              minTickGap={80}
              yAxisId={1}
            />
            <Tooltip
              cursor={true}
              formatter={(val) => toK(val, true)}
              labelFormatter={(label) => toNiceDateYear(label)}
              labelStyle={{ paddingTop: 4 }}
              contentStyle={{
                padding: '10px 14px',
                borderRadius: 10,
                borderColor: 'var(--c-zircon)',
              }}
              wrapperStyle={{ top: -70, left: -10 }}
            />
            <Area
              strokeWidth={2}
              dot={false}
              type="monotone"
              name={'Total Liquidity' + (currencyUnit === 'USD' ? ' (USD)' : ' (ETH)')}
              dataKey={currencyUnit === 'USD' ? 'usdLiquidity' : 'ethLiquidity'}
              yAxisId={0}
              fill="var(--c-token)"
              opacity={'0.4'}
              stroke="var(--c-token)"
            />
            <Area
              type="monotone"
              name={'Eth Balance'}
              dataKey={'ethBalance'}
              fill="var(--c-token)"
              opacity={'0'}
              stroke="var(--c-token)"
            />
            <Area
              type="monotone"
              name={'Token Balance'}
              dataKey={'tokenBalance'}
              fill="var(--c-token)"
              yAxisId={1}
              opacity={'0'}
              stroke="var(--c-token)"
            />
          </AreaChart>
        </ResponsiveContainer>
      </ChartWrapper>
    )
  } else {
    // volume
    return (
      <ChartWrapper>
        <ResponsiveContainer aspect={isMobile ? 60 / 22 : 60 / 12}>
          <BarChart margin={{ top: 0, right: 0, bottom: 6, left: 10 }} barCategoryGap={1} data={chartData}>
            <CartesianGrid stroke="#f5f5f5" />
            <XAxis
              tickLine={false}
              axisLine={false}
              interval="preserveEnd"
              minTickGap={80}
              tickMargin={14}
              tickFormatter={(tick) => toNiceDate(tick)}
              dataKey="dayString"
            />
            <YAxis
              hide={isMobile}
              type="number"
              axisLine={false}
              tickMargin={16}
              tickFormatter={(tick) => toK(tick)}
              tickLine={false}
              interval="preserveEnd"
              minTickGap={80}
              yAxisId={0}
            />
            <Tooltip
              cursor={true}
              formatter={(val) => toK(val, true)}
              labelFormatter={(label) => toNiceDateYear(label)}
              labelStyle={{ paddingTop: 4 }}
              contentStyle={{
                padding: '10px 14px',
                borderRadius: 10,
                borderColor: 'var(--c-zircon)',
              }}
              wrapperStyle={{ top: -70, left: -10 }}
            />
            <Bar
              type="monotone"
              name={'Volume' + (currencyUnit === 'USD' ? ' (USD)' : ' (ETH)')}
              dataKey={currencyUnit === 'USD' ? 'usdVolume' : 'ethVolume'}
              fill="var(--c-token)"
              opacity={'0.4'}
              yAxisId={0}
              stroke="var(--c-token)"
            />
          </BarChart>
        </ResponsiveContainer>
      </ChartWrapper>
    )
  }
}