recharts#Line JavaScript Examples

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

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

LineChartRevenue = () => (
  <ResponsiveContainer width="100%" height={350}>
    <LineChart data={data} margin={{top: 0, right: 26, left: -20, bottom: 0}}>

      <CartesianGrid strokeDasharray="3 3"/>
      <XAxis stroke="#ffffff" dataKey="name"/>
      <YAxis stroke="#ffffff"/>
      <Line type="monotone" dataKey="pv" stroke="#e6b21a" activeDot={{r: 8}}/>
      <Line type="monotone" dataKey="uv" stroke="#ffffff"/>
    </LineChart>
  </ResponsiveContainer>
)

IVSkewChart = (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: 'Implied Volatility', angle: -90, position: 'insideLeft', textAnchor: 'middle' }}/>
			<Tooltip />
			<Legend />
			<Line type="monotone" dataKey="iv" stroke="#002366" />
		</LineChart>
	)
}

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

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 GrowthLineChart ({ data, xName, yName }) {
  return (
    <ResponsiveContainer width='100%' height={300} minWidth={300}>
      <LineChart
        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 />
        <Line type='monotone' dataKey='num' name={yName} stroke='var(--secondary)' />
      </LineChart>
    </ResponsiveContainer>
  )
}

ComposedCharts = observer(() => {
  return (
    <div>
      <ComposedChart width={730} height={250} data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <CartesianGrid stroke="#f5f5f5" />
        <Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
        <Bar dataKey="pv" barSize={20} fill="#413ea0" />
        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
      </ComposedChart>
    </div>
  );
})

LineGraph = props => {
  const {
    data,
    dataKey,
    height,
    margin,
    maxHeight,
    strokeColor,
    title,
    width,
    xAxisKey
  } = props;

  return (
    <div className='graph'>
      <p className='title'>{title}</p>
      <LineChart
        width={width}
        height={maxHeight > 0 ? (
          height <= maxHeight ? height : maxHeight
        ) : height}
        data={data}
        margin={margin}
      >
        <CartesianGrid strokeDasharray="5 5" />
        <XAxis dataKey={xAxisKey} />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey={dataKey} stroke={strokeColor} activeDot={{ r: 8 }} />
      </LineChart>
    </div>
  );
}

function SimpleComposedChart() {
  const theme = useTheme();
  return (
    <ResponsiveContainer width="100%" minWidth={500} height={350}>
      <ComposedChart margin={{ top: 0, right: -15, left: -15, bottom: 0 }} data={sales}>
        <YAxis ticks={[0, 2500, 5000, 9800]} tick={{ fontSize: 12 }} tickLine={false} />
        <XAxis dataKey="month" tick={{ fontSize: 12 }} tickLine={false} />
        <Area
          type="natural"
          dataKey="area"
          fill={theme.palette.primary.light}
          strokeWidth={0}
          activeDot={false}
        />
        <Line type="monotone" dataKey="sales" stroke={theme.palette.primary.dark} strokeWidth={2} />
        <Line
          type="monotone"
          dataKey="orders"
          stroke={theme.palette.success.light}
          strokeWidth={2}
          dot={{
            stroke: theme.palette.success.dark,
            strokeWidth: 2,
            fill: theme.palette.success.main
          }}
        />
      </ComposedChart>
    </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>
      
    );
  }

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

StatChart = ({ data, dataKey, color }) => {
  const sortedData = orderBy(data, 'date.date')

  return (
    <ResponsiveContainer width="100%" height={128}>
      <LineChart data={sortedData}>
        <Tooltip
          separator=""
          formatter={(value) => [commaNumber(value)]}
          labelFormatter={() => ''}
        />
        <Line
          type="monotone"
          dataKey={dataKey}
          stroke={theme.colors[color]}
          strokeWidth={3}
          dot={false}
        />
      </LineChart>
    </ResponsiveContainer>
  )
}

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

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

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 LineGraph() {
	const data = useSelector((state) => state.User.userVideoFeedback.score_over_time);
	const recursiveFormat = getDate(data);
	console.log("width", window.screen.availWidth, "height", window.screen.availHeight);

	return (
		<div>
			<LineChart
				width={window.screen.availWidth < 768 ? 350 : window.screen.availWidth < 1800 ? 700 : 800}
				height={window.screen.availHeight < 768 ? 300 : window.screen.availHeight < 1100 ? 550 : 600}
				margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
				data={recursiveFormat}>
				<CartesianGrid strokeDasharray="5 5" />
				<XAxis dataKey="created_at" />
				<YAxis domain={[0, 5]} ticks={[0, 1, 2, 3, 4, 5]} />
				<Tooltip />
				<Legend />
				<Line
					strokeWidth="0.3rem"
					type="monotone"
					dataKey="overall_performance"
					stroke="#6954EA"
					dot={true}
					activeDot={{ r: 8 }}
				/>
			</LineChart>
		</div>
	);
}

function SimpleLineChart() {
  const theme = useTheme();
  return (
    <ResponsiveContainer width="100%" minWidth={500} height={350}>
      <LineChart
        width={600}
        height={300}
        data={sales}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <XAxis dataKey="month" />
        <YAxis />

        <Tooltip />

        <Line
          type="monotone"
          dataKey="orders"
          stroke={theme.palette.primary.dark}
          activeDot={{ r: 8 }}
        />
        <Line type="monotone" dataKey="sales" stroke={theme.palette.success.light} />
      </LineChart>
    </ResponsiveContainer>
  );
}

function lineForSpec(spec) {
  return (
    <Line
      key={spec.label}
      baseLine={10000}
      type="monotone"
      dataKey={spec.label}
      isAnimationActive={false}
      fill={spec.color}
      stroke={spec.color}
      strokeDasharray={spec.stipple ? '1 2' : undefined}
      dot={false}
      strokeWidth={2}
      yAxisId={spec.rightAxis ? 1 : 0}
    />
  );
}

render() {
		let height = window.innerWidth >= 992 ? 300 : 200;
		let margin =
			window.innerWidth >= 992
				? { top: 10, right: 0, left: -15, bottom: 0 }
				: { top: 10, right: 0, left: -60, bottom: 0 };
		const formatter = (value) => `${this.formatBytes(value)}`;
		// const formatter = (value) => value;
		return (
			<ResponsiveContainer width="100%" height={height}>
				<LineChart data={this.props.bandwidth} margin={margin}>
					<XAxis
						dataKey="name"
						ticks={['2m0s', '1m30s', '1m0s', '30s', '0s']}
					/>
					<YAxis tickFormatter={formatter} allowDecimals={false} />
					<CartesianGrid />
					<Legend iconType="circle" align="right" />
					<Tooltip />
					<Line
						type="monotone"
						dataKey="Local"
						stroke="#e69f23"
						dot={false}
						strokeWidth={2}
						activeDot={{ r: 8 }}
						isAnimationActive={false}
					/>
					<Line
						type="monotone"
						dataKey="Remote"
						stroke="#366dfc"
						isAnimationActive={false}
						dot={false}
						strokeWidth={2}
					/>
				</LineChart>
			</ResponsiveContainer>
		);
	}

MiniStateSparkline = ({
  requiredStateDailyData,
  dataKey,
  min,
  max,
  sparklineData,
  stroke,
}) => {
  return (
    <section style={{ alignContent: "center" }}>
      <ResponsiveContainer width="95%" height="100%" aspect={2.35}>
        <LineChart
          data={requiredStateDailyData.slice(
            requiredStateDailyData.length - 20,
            requiredStateDailyData.length
          )}
          syncId="line2"
        >
          <YAxis domain={[min, max]} hide={true} />

          <Tooltip
            content={<CustomTooltip />}
            contentStyle={{
              background: "rgba(255,255,255,0)",
              border: "none",
              textAlign: "left",
            }}
            active={true}
            cursor={false}
            position={{ x: -5, y: 0 }}
            offset={5}
          />
          <Line
            type="monotone"
            dataKey={dataKey}
            stroke={stroke}
            strokeWidth={2.2}
            dot={false}
            animationDuration={2000}
          />
          <ReferenceDot
            x={
              sparklineData.slice(
                sparklineData.length - 20,
                sparklineData.length
              ).length - 1
            }
            y={Number(sparklineData.slice(-1))}
            r={3}
            fill={stroke}
            stroke={stroke}
            isAbove={true}
          />
        </LineChart>
      </ResponsiveContainer>
    </section>
  );
}

render() {
		let height = window.innerWidth >= 992 ? 300 : 200;
		let margin =
			window.innerWidth >= 992
				? { top: 10, right: 0, left: -40, bottom: 0 }
				: { top: 10, right: 0, left: -60, bottom: 0 };
		const formatter = (value) => value;
		return (
			<ResponsiveContainer width="100%" height={height}>
				<LineChart data={this.props.ram} margin={margin}>
					<XAxis dataKey="at" />
					<YAxis
						tickFormatter={formatter}
						allowDecimals={false}
						ticks={[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
						interval={0}
						tick={window.innerWidth >= 992 ? true : false}
					/>
					<CartesianGrid />
					<Tooltip />
					<Legend iconType="circle" align="right" />
					<Line
						type="monotone"
						dataKey="processMemoryUtilization"
						stroke="#33f1c5"
						dot={false}
						strokeWidth={2}
						activeDot={{ r: 8 }}
						isAnimationActive={false}
						name="Plex"
					/>
					<Line
						type="monotone"
						dataKey="hostMemoryUtilization"
						stroke="#bd86d1"
						dot={false}
						strokeWidth={2}
						isAnimationActive={false}
						name="System"
					/>
				</LineChart>
			</ResponsiveContainer>
		);
	}

MiniStateSparkline = ({
  requiredStateDailyData,
  dataKey,
  min,
  max,
  sparklineData,
  stroke,
}) => {
  return (
    <section style={{ alignContent: "center" }}>
      <ResponsiveContainer width="95%" height="100%" aspect={2.35}>
        <LineChart
          data={requiredStateDailyData.slice(
            requiredStateDailyData.length - 20,
            requiredStateDailyData.length
          )}
          syncId="line2"
        >
          <YAxis domain={[min, max]} hide={true} />

          <Tooltip
            content={<CustomTooltip />}
            contentStyle={{
              background: "rgba(255,255,255,0)",
              border: "none",
              textAlign: "left",
            }}
            active={true}
            cursor={false}
            position={{ x: -5, y: 0 }}
            offset={5}
          />
          <Line
            type="monotone"
            dataKey={dataKey}
            stroke={stroke}
            strokeWidth={2.2}
            dot={false}
            animationDuration={2000}
          />
          <ReferenceDot
            x={
              sparklineData.slice(
                sparklineData.length - 20,
                sparklineData.length
              ).length - 1
            }
            y={Number(sparklineData.slice(-1))}
            r={3}
            fill={stroke}
            stroke={stroke}
            isAbove={true}
          />
        </LineChart>
      </ResponsiveContainer>
    </section>
  );
}

render() {
    return (
      <div className={"graph-style"}>
        <Form>
          <Form.Group controlId="caribbeanForm.SelectCustom">
            <Form.Label>Choose a country to view test data</Form.Label>
            <Form.Control
              ref={(select) => {
                this.select = select;
              }}
              as="select"
              custom
              onChange={this.handleChange}
              defaultValue={svg}
            >
              <option value={bb}>{bb}</option>
              <option value={svg}>{svg}</option>
            </Form.Control>
          </Form.Group>
        </Form>
        <ResponsiveContainer width="99%" height={500}>
          <LineChart
            data={this.state.data[this.state.selectedCountry]}
            margin={{
              top: 5,
              right: 30,
              left: 20,
              bottom: 5,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" stroke={graphGridColour} />
            <XAxis dataKey="date" />
            <YAxis domain={[0, 30000]} />
            <Tooltip content={<TestsCustomTooltip />} />
            <Legend />
            <Line
              type="monotone"
              dataKey={this.t('tests')}
              stroke={testPageLineColour}
              dot={false}
            />
          </LineChart>
        </ResponsiveContainer>

        <Alert dismissable={"true"} key={1} variant={'secondary'} style={{color: 'gray', fontSize: '0.75rem',backgroundColor: '#273852', borderColor: '#273852', padding:'0.45rem', marginTop:'1rem'}}>
        {this.t('tests_disclaimer')} {this.state.selectedCountry === bb? this.t('credit_kevz') : svgCredit}
       </Alert>

       <Alert dismissable={"true"} key={1} variant={'secondary'} style={{color: 'gray', fontSize: '0.75rem',backgroundColor: '#273852', borderColor: '#273852', padding:'0.45rem', marginTop:'1rem'}}>
        Interested in volunteering for data entry? contact me on <Alert.Link href="https://www.twitter.com/janiquekajohn" target="_blank">Twitter</Alert.Link>
       </Alert>
      
      </div>
    );
  }

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

  return (
    <div>
      <SectionTitle>{name}</SectionTitle>
      <Card className="mb-8">
        <CardBody>
          <ResponsiveContainer height={400}>
            <LineChart
              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) => (
                <Line
                  type="monotone"
                  key={k}
                  dataKey={k}
                  stroke={colors[i]}
                  strokeWidth={2}
                />
              ))}
            </LineChart>
          </ResponsiveContainer>
        </CardBody>
      </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>
}

GraphDeathProjectionRender = (props) => {
  let data = props.data;
  const max_date = props.max_date;
  const data_keys = props.data_keys;

  data = data.map(d => {
    d.name = moment(d.fulldate, "MM/DD/YYYY").format("M/D");
    return d;
  });
  data = data.sort((a, b) => moment(a.fulldate, "MM/DD/YYYY").toDate() - (moment(b.fulldate, "MM/DD/YYYY")).toDate());

  const [state, setState] = React.useState({
    showall: false,
  });

  const handleLogScaleToggle = event => {
    setState({ ...state, showall: !state.showall });
  };
  const cutoff = moment().subtract(30, 'days')
  const future = moment().add(30, 'days')
  data = data.filter(d => {
    let day = moment(d.fulldate, "MM/DD/YYYY");
    return day.isAfter(cutoff) && day.isBefore(future);
  });
  const formatYAxis = (tickItem) => {
    return myShortNumber(tickItem);
  }

  return <>
    <Grid container alignItems="center" spacing={1}>
      <Grid item onClick={handleLogScaleToggle}>
        <Typography>
          Daily
                </Typography>
      </Grid>
      <Grid item>
        <AntSwitch checked={state.showall} onClick={handleLogScaleToggle} />
      </Grid>
      <Grid item onClick={handleLogScaleToggle}>
        <Typography>
          Total
                </Typography>
      </Grid>
      <Grid item></Grid>
    </Grid>
    <ResponsiveContainer height={300} >
      <ComposedChart data={data} margin={{ top: 5, right: 30, left: 5, bottom: 5 }} >
        <XAxis dataKey="name" />
        <YAxis yAxisId={0} tickFormatter={formatYAxis} />
        <ReferenceLine x={moment(max_date, "MM/DD/YYYY").format("M/D")} label={{ value: props.max_label, fill: '#a3a3a3' }} stroke="#e3e3e3" strokeWidth={3} />
        <CartesianGrid stroke="#d5d5d5" strokeDasharray="5 5" />
        <Line type="monotone" dataKey={data_keys.key_mean} stroke="#000000" dot={{ r: 1 }} yAxisId={0} strokeWidth={2} />
        <Area type='monotone' dataKey={data_keys.key_lower} stackId="1" stroke='#8884d8' fill='#FFFFFF' />
        <Area type='monotone' dataKey={data_keys.key_delta} stackId="1" stroke='#82ca9d' fill='#82ca9d' />
        <Line type="monotone" dataKey="actualDeath_daily" stroke="#FF0000" dot={{ r: 1 }} strokeDasharray="2 2" yAxisId={0} strokeWidth={2} />
        <Line type="monotone" dataKey="actualDeath_moving_avg" stroke="#FF0000" dot={{ r: 1 }} yAxisId={0} strokeWidth={3} />
        {state.showall && <Line type="monotone" dataKey={data_keys.key_mean_cumulative} dot={{ r: 1 }} stroke="#000000" yAxisId={0} strokeWidth={1} />}
        {state.showall && <Line type="monotone" dataKey="actualDeath_total" dot={{ r: 1 }} stroke="#ff0000" yAxisId={0} strokeWidth={2} />}
        {state.showall && <Area type='monotone' dataKey={data_keys.key_lower_cumulative} stackId="2" stroke='#8884d8' fill='#FFFFFF' />}
        {state.showall && <Area type='monotone' dataKey={data_keys.key_delta_cumulative} stackId="2" stroke='#82ca9d' fill='#82ca9d' />}
        <Tooltip content={props.tooltip} />
        <Legend verticalAlign="top" payload={[
          { value: 'Actual Death', type: 'line', color: '#ff0000' },
          { value: 'Projection', type: 'line', color: '#000000' },
        ]} />
      </ComposedChart>
    </ResponsiveContainer>
    <Typography variant="body2">
      Source: The Institute for Health Metrics and Evaluation
                </Typography>
  </>
}

Chart = props => {
  const { observations, tempUnit } = props;

  const temps = observations.map(observation => {
    const datetime = new Date(observation.date).toISOString().slice(0, 10);
    let temp;
    if (
      !observation.physical.feverSeverity ||
      observation.physical.feverSeverity === '' ||
      !parseFloat(observation.physical.feverSeverity, 10) > 0
    ) {
      temp = 0;
    } else {
      temp = parseFloat(observation.physical.feverSeverity, 10);
    }

    return { date: datetime, temperature: temp };
  });

  const [temperatureData] = useState(temps);

  return (
    <ResponsiveContainer width="100%" aspect={4.0 / 1.5}>
      <LineChart
        data={temperatureData}
        margin={{
          top: 10,
          right: 50,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="date" />
        <YAxis type="number" domain={tempUnit === 'fahrenheit' ? [94, 105] : [32, 42]} />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="temperature" stroke="#8884d8" activeDot={{ r: 8 }} />
        <Tooltip />
      </LineChart>
    </ResponsiveContainer>
  );
}