react-chartjs-2#Pie JavaScript Examples

export function PieChart(props) {

  function generateGraph() {
    const colorVal = `rgba(${props.color.r},${props.color.g},${props.color.b},${props.color.a})`;
    return {
      labels: props.labels,
      datasets: [
        {
          label: props.title,
          fill: false,
          lineTension: 0.5,
          backgroundColor: colorVal,
          borderColor: 'rgba(0,0,0,1)',
          borderWidth: 2,
          data: props.data
        }
      ]
    }
  }

  return (
    <Pie data={generateGraph} />)
}

Piechart = (props) => (
  <Pie
    data={{
      labels: props.labels ? props.labels : [],
      datasets: props.datasets ? props.datasets : [],
    }}
    options={{
      plugins: {
        datalabels: {
          display: true,
          color: "white",
          font: {
            weight: "bold",
            size: 10,
          },
        },
      },
      tooltips: {
        enabled: true,
      },
      legend: {
        labels: {
          fontSize : 12
        },
        position: 'bottom',
        align:'start'
      },
    }}
    responsive="true"
    maintainAspectRatio="true"
    {...props}
  />
)

Cgraph2 = ({gConfirm,gRecover,gDeath}) => {
    const pieChart = (<Pie   
        height = {160}
        data = {{ 
         labels: ['Confirmed','Recovered','Death'],
         datasets: [
            {
              backgroundColor:['orange','green','red'],
              data: [gConfirm,gRecover,gDeath]
            },
          ],
        }
        } 
        options={{
          responsive:true,
          maintainAspectRatio:false,
            }
        }
        />
        )
    return (
        <div className ="gcard">
                <p className="ti1 fw7">World Percentage</p>    
                <div className="graph">
                {pieChart}
                </div>
                </div>
                
      );
    }

render() {
        const data = {
            labels: [
                "Desktops",
                "Tablets"
            ],
            datasets: [
                {
                    data: [300, 180],
                    backgroundColor: [
                        "#34c38f",
                        "#ebeff2"
                    ],
                    hoverBackgroundColor: [
                        "#34c38f",
                        "#ebeff2"
                    ],
                    hoverBorderColor: "#fff"
                }]
        };

        return (
            <React.Fragment>
                <Pie width={474} height={260} data={data} />
            </React.Fragment>
        );
    }

myPie = () => {
  return (
    <Pie
      data={state}
      options={{
        title: {
          display: true,
          text: 'Topicwise Distribution',
          fontSize: 20,
        },
        legend: {
          display: true,
          position: 'right',
        },
      }}
    />
  )
}

function Chart(props) {
    function renderChart(info, type, metaData) {
        try {
            return getChart(info, type, metaData)
        } catch (e) {
            console.log(e)
        }
    }
    function getChart(info, type, metaData) {
        let data = createData(info, type, metaData)
        let options = {
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: metaData.xLabel
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: metaData.yLabel
                    }
                }]
            }
        }
        switch (type) {
            case 'batteryCapacityHistory':
            case 'batteryLifeHistory':
                return <Line data={data} options={options}/>
            case 'powerUsageInfo':
                if (metaData.type === 'cumulativePie') {
                    return <Pie data={data} />
                }
                else if(metaData.type === 'cumulativeActiveSuspended') {
                    return <Pie data={data}/>
                }
                else if (metaData.type === 'dailyBar') {
                    return <Bar data={data} options={options}/>
                }
                else if (metaData.type === 'dailyLine') {
                    return <Line data={data} options={options} />
                }
                return <Pie data={data} />
            default:
                return <Line data={data} options={options}/>
        }
    }

    return (
        <div>
            <div className="content-center">
                <div>
                    <h3>{props.heading}</h3>
                    <span className="text-xs content-center">{props.info.note}</span>
                </div>
            </div>
            {renderChart(props.info, props.info.name, props.metaData)}
        </div>
    )
}

PieChartValues = ({title, data, labels, height}) => {
  const chartRef = useRef(null)

  const chart = {
    datasets: [{
      data: data.map(r => (r.value)),
      label: data.map(r => (r.label ? r.label : null)),
      backgroundColor: data.map(r => r.color),
      hoverBackgroundColor: data.map(r => r.color),
      _meta: {}
    }]
  }

  if (labels) {
    chart.labels = labels
  }

  const options = useMemo(() => {
    return {
      responsive: true,
      events: false,
      animation: {
        duration: 1000,
        easing: 'easeOutQuart',
        onComplete: animation => {
          const {ctx} = animation.chart
          const {data} = chartRef.current.props
          ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily)
          ctx.textAlign = 'center'
          ctx.textBaseline = 'bottom'
          ctx.context = {}
          data.datasets.forEach(dataset => {
            for (let i = 0; i < dataset.data.length; i++) {
              const model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model
              const midRadius = model.innerRadius + ((model.outerRadius - model.innerRadius) / 2)
              const startAngle = model.startAngle
              const endAngle = model.endAngle
              const midAngle = startAngle + ((endAngle - startAngle) / 2)
              const x = midRadius * Math.cos(midAngle)
              const y = midRadius * Math.sin(midAngle)
              ctx.fillStyle = '#fff'
              const values = dataset.label[i] ? dataset.data[i] + ' ' + dataset.label[i] : dataset.data[i]
              ctx.fillText(values, model.x + x - 10, model.y + y + 15)
            }
          })
        }
      }
    }
  }, [chartRef])

  return (
    <>
      {title && (<div className='title'>{title}</div>)}
      <Pie ref={chartRef} data={chart} options={options} height={height} />
      <style jsx>{`
      .title {
          text-align: center;
          font-size: large;
          font-weight: bold;
          padding: .5em;
          margin-top: .5em;
        }
        `}</style>
    </>
  )
}

ChartsChartjs = () => {
  return (
    <div>
      <Helmet title="Charts / Chartjs" />
      <div className="kit__utils__heading">
        <h5>
          <span className="mr-3">Charts / Chartjs</span>
          <a
            href="http://www.chartjs.org/"
            rel="noopener noreferrer"
            target="_blank"
            className="btn btn-sm btn-light"
          >
            Official Documentation
            <i className="fe fe-corner-right-up" />
          </a>
        </h5>
      </div>
      <div className="card">
        <div className="card-body">
          <div className="row">
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Line Chart</strong>
              </h5>
              <div className="mb-5">
                <Line data={lineData} options={lineOptions} width={400} height={200} />
              </div>
            </div>
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Bar Chart</strong>
              </h5>
              <div className="mb-5">
                <Bar data={barData} options={barOptions} width={400} height={200} />
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Radar Chart</strong>
              </h5>
              <div className="mb-5">
                <Radar data={radarData} options={radarOptions} width={400} height={200} />
              </div>
            </div>
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Polar Area Chart</strong>
              </h5>
              <div className="mb-5">
                <Polar data={polarData} options={polarOptions} width={400} height={200} />
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Pie Chart</strong>
              </h5>
              <div className="mb-5">
                <Pie data={pieData} options={pieOptions} width={400} height={200} />
              </div>
            </div>
            <div className="col-xl-6 col-lg-12">
              <h5 className="mb-4">
                <strong>Doughnut Chart</strong>
              </h5>
              <div className="mb-5">
                <Doughnut data={doughnutData} options={doughnutOptions} width={400} height={200} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

render() {
        return (
            <div>
                <div className="page-header">
                    <h3 className="page-title">
                        Chart-js
                    </h3>
                    <nav aria-label="breadcrumb">
                        <ol className="breadcrumb">
                        <li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>Charts</a></li>
                        <li className="breadcrumb-item active" aria-current="page">Chart-js</li>
                        </ol>
                    </nav>
                </div>
                <div className="row">
                    <div className="col-md-6 grid-margin stretch-card">
                        <div className="card">
                            <div className="card-body">
                                <h4 className="card-title">Line Chart</h4>
                                <Line data={this.data} options={this.options} />
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6 grid-margin stretch-card">
                        <div className="card">
                            <div className="card-body">
                                <h4 className="card-title">Bar Chart</h4>
                                <Bar data={this.data} options={this.options} />    
                            </div>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-md-6 grid-margin stretch-card">
                        <div className="card">
                            <div className="card-body">
                                <h4 className="card-title">Area Chart</h4>
                                <Line data={this.areaData} options={this.areaOptions} />
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6 grid-margin stretch-card">
                        <div className="card">
                            <div className="card-body">
                                <h4 className="card-title">Doughnut Chart</h4>
                                <Doughnut data={this.doughnutPieData} options={this.doughnutPieOptions} />
                            </div>
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-md-6 grid-margin stretch-card">
                        <div className="card">
                            <div className="card-body">
                                <h4 className="card-title">Pie Chart</h4>
                                <Pie data={this.doughnutPieData} options={this.doughnutPieOptions} />                                
                            </div>
                        </div>
                    </div>
                    <div className="col-md-6 grid-margin stretch-card">
                        <div className="card">
                            <div className="card-body">
                                <h4 className="card-title">Scatter Chart</h4>
                                <Scatter data={this.scatterChartData} options={this.scatterChartOptions} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

PieChart = ({ starData }) => {
    const themeContext = useContext(ThemeContext);

    let data = {};

    if (starData.data) {

        // Only display chart if there is at least 1 star available
        let sum = starData.data.reduce((a, b) => a + b, 0);
        if (sum > 0) {
            data = {
                labels: starData.label,
                datasets: [
                    {
                        label: "",
                        data: starData.data,
                        backgroundColor: bgColor,
                        borderWidth: 0,
                    },
                ],
            };
        }
    }

    return (
        <>
            <Pie
                data={data}
                // height={300}
                options={{
                    maintainAspectRatio: false,
                    responsive: true,
                    aspectRatio: 1,
                    title: {
                        display: false,
                    },
                    legend: {
                        // display: false,
                        position: "bottom",
                        labels: {
                            fontColor: themeContext.textColor,
                        }
                    },
                }}
            />
        </>
    );
}

export default function PieChart(props){
  const { series } = props;
  var labels = [];
  var valueList = [];
  var colorList = [];
  series.forEach( slice => {
    labels.push(slice.label);
    valueList.push(slice.value);
    colorList.push(slice.color);
  });

  const chartData = {
    labels: labels,
    datasets: [
      {
        data: valueList,
        backgroundColor: colorList,
        borderWidth: 1,
        hoverBorderWidth: 0,
      }
    ],
  };

  const chartOptions = {
    cutoutPercentage: 5,
    legend: {
      display: false,
    },
    layout: {
            padding: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            }
        }
  };

  return <Pie data={chartData} options={chartOptions}/>;
}

render() {
    return (
      <div>
        <Pie id="pie-chart-expenses" data={this.state} />
      </div>
    );
  }

render() {
    return (
      <div>
        <Pie id="pie-chart-income" data={this.state} />
      </div>
    );
  }

SurveyCharts = ({ surveyId, setShowCharts }) => {
  const iOS =
    typeof navigator !== 'undefined' &&
    typeof navigator.userAgent !== 'undefined' &&
    /iPad|iPhone|iPod/.test(navigator.userAgent);
  const { drawer } = useStyles();

  const [eachData, setEachData] = useState([]);
  const [survey, setSurvey] = useState({});

  useEffect(() => {
    api
      .getSurvey(surveyId)
      .then((survey) => {
        if (!survey) {
          throw new Error('Survey is not defined');
        }
        setSurvey(survey);
        console.warn('raw survey data:', survey);
        const chartData = [];
        for (let i = 0; i < survey.questions.length; i++) {
          const q = survey.questions[i];
          const res = survey.responses[i];
          if (res) {
            chartData.push({
              title: q.prompt,
              data: {
                labels: q.choices,
                // totals: res.datasets[0].data,
                totals: Array.from(q.choices)
                  .fill(0)
                  .map(
                    (c, i) =>
                      (res.labels.indexOf(q.choices[i]) >= 0 &&
                        res.datasets[0].data[
                          res.labels.indexOf(q.choices[i])
                        ]) ||
                      c
                  ),
              },
            });
          }
        }
        console.warn('loaded chart data:', chartData);
        setEachData(chartData);
      })
      .catch((err) => {
        console.error('err:', err);
      });
  }, [surveyId]);

  return (
    <Drawer
      disablebackdroptransition={!iOS ? 'true' : 'false'}
      disablediscovery={iOS ? 'true' : 'false'}
      anchor={'right'}
      open={true}
      onClose={() => setShowCharts(false)}
      classes={{ paper: drawer }}
      PaperProps={{ elevation: 6 }}
    >
      <Grid
        container
        style={{
          flexDirection: 'column',
          borderBottom: '1px solid black',
          marginBottom: '1rem',
        }}
      >
        <Grid item xs={12}>
          <Typography color="primary" variant="h4">
            Survey Response Data
          </Typography>
          <Typography variant="h5">{survey.title}</Typography>
        </Grid>
        <Grid item xs={12}>
          <IconButton
            onClick={() => setShowCharts(false)}
            style={{ alignSelf: 'flex-end' }}
          >
            <Close />
          </IconButton>
        </Grid>
      </Grid>
      <Grid container>
        {eachData &&
          eachData.map((item) => (
            <Grid item key={item.title}>
              <Typography variant="h5">{item.title}</Typography>
              <Pie
                data={{
                  labels: item.data.labels,
                  datasets: [
                    {
                      label: '# of Votes',
                      data: item.data.totals,
                      backgroundColor: [
                        'rgba(118, 187, 35, 1)',
                        '#61892f',
                        'rgba(135, 195, 46, .32)',
                      ],
                      borderColor: ['#000'],
                      borderWidth: 1,
                    },
                  ],
                }}
                options={{
                  plugins: {
                    legend: {
                      display: true,
                      position: 'bottom',
                    },
                  },
                }}
              />
            </Grid>
          ))}
      </Grid>
      <Box mt={5} />
    </Drawer>
  );
}

function QuizStats(props) {
	const [loading, setLoading] = useState(true);

	let state = null;
	const [marksPieData, setMarksPieData] = useState({labels: [], data: [], colors: []});
	const [highLowGraph, setHighLowData] = useState({highest: -1, lowest: -1, average: -1});
	const [lineGraphData, setLineData] = useState({labels: [], data: []});
	
	const [redirect, setRedirect] = useState(false);

	const randomColor = () => {
		let r = Math.floor(Math.random() * 255);
		let g = Math.floor(Math.random() * 255);
		let b = Math.floor(Math.random() * 255);
		return "rgb(" + r + "," + g + "," + b + ")";
	}

	const setup = () => {
		let obj = {};
		let obj2 = {labels: [], data: []};

		let highest = -1;
		let lowest = Infinity;
		let sum = 0;

		state.map((response) => {
			highest = Math.max(highest, response.marks);
			lowest = Math.min(lowest, response.marks);
			sum += response.marks;
			if(obj[response.marks] === undefined) {
				obj[response.marks] = 1;
			} else {
				obj[response.marks]++;
			}
			
			let time = (response.timeEnded-response.timeStarted)/(1000*60);

			obj2["labels"].push(response.userId.name);
			obj2["data"].push(time);
		})

		Object.keys(obj).map((mark) => {
			let newData = marksPieData;
			newData["labels"].push(mark);
			newData["data"].push(obj[mark]);
			newData["colors"].push(randomColor());
			setMarksPieData(newData);
		})

		let average = sum/state.length;
		let newBarData = highLowGraph;
		newBarData["highest"] = highest;
		newBarData["average"] = average;
		newBarData["lowest"] = lowest;
		setHighLowData(newBarData);
		setLineData(obj2);

		setLoading(false);
	}
	
	useState(() => {
		if(props.location.state === undefined) {
			setLoading(false);
			setRedirect(true);
			return;
		}

		state = props.location.state.responses;
		console.log(state);
		setup();
	}, [])

	if (loading) {
		return <Loading />
	} else if(redirect) {
		return <Redirect to="/dashboard" />
	}
	return (
		<Container className="result-page">
			<div className="result-head">
				<Typography variant="h4" className="result-title">Stats</Typography>
			</div>
			<div className="charts-container" style={{paddingBottom: '3%'}}>
				<div className="pie-chart" style={{marginBottom: '3%'}}>
					<Pie data={{
						datasets: [{data: marksPieData["data"], backgroundColor: marksPieData["colors"]}], 
						labels: marksPieData["labels"]
					}} 
					width={300} height={300} 
					options={{
						maintainAspectRatio: false, 
						responsive: true, 
						title: {
							display: true,
							text: "Marks Obtained",
							fontSize: 16
						}}}/>
				</div>
				<Grid container spacing={0}>
					<Grid item xs={12} sm={6}>
						<Bar width={300} height={300}
							data={{
								datasets: [{
									data: [highLowGraph["highest"], highLowGraph["average"], highLowGraph["lowest"]],
									backgroundColor: ["green", "yellow", "red"],
									barThickness: 70
								}],
								labels: ["Highest", "Average", "Lowest"]
							}}
							options={{
								legend: {display: false},
								maintainAspectRatio: false,
								title: {
									display: true,
									text: "Highest/Average/Lowest",
									fontSize: 16
								},
								scales: { yAxes: [{ticks: {beginAtZero: true}}]}
							}} />
					</Grid>
					<Grid item xs={12} sm={6}>
						<Line width={300} height={300}
							data={{
								datasets: [{
									data: lineGraphData["data"],
									backgroundColor: "rgba(255, 0, 255, 0.3)",
									borderColor: "rgb(255, 0, 255)"
								}],
								labels: lineGraphData["labels"]
							}}

							options={{
								maintainAspectRatio: false,
								title: {
									display: true,
									text: "Time taken (in minutes)",
									fontSize: 16
								},
								legend: {display: false}
							}} />
					</Grid>
				</Grid>
			</div>
		</Container>
	)
}

render() {
    return (
      <div className="animated fadeIn">
        <CardColumns className="cols-2">
          <Card>
            <CardHeader>
              Line Chart
              <div className="card-header-actions">
                <a href="http://www.chartjs.org" className="card-header-action">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <div className="chart-wrapper">
                <Line data={line} options={options} />
              </div>
            </CardBody>
          </Card>
          <Card>
            <CardHeader>
              Bar Chart
              <div className="card-header-actions">
                <a href="http://www.chartjs.org" className="card-header-action">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <div className="chart-wrapper">
                <Bar data={bar} options={options} />
              </div>
            </CardBody>
          </Card>
          <Card>
            <CardHeader>
              Doughnut Chart
              <div className="card-header-actions">
                <a href="http://www.chartjs.org" className="card-header-action">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <div className="chart-wrapper">
                <Doughnut data={doughnut} />
              </div>
            </CardBody>
          </Card>
          <Card>
            <CardHeader>
              Radar Chart
              <div className="card-header-actions">
                <a href="http://www.chartjs.org" className="card-header-action">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <div className="chart-wrapper">
                <Radar data={radar} />
              </div>
            </CardBody>
          </Card>
          <Card>
            <CardHeader>
              Pie Chart
              <div className="card-header-actions">
                <a href="http://www.chartjs.org" className="card-header-action">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <div className="chart-wrapper">
                <Pie data={pie} />
              </div>
            </CardBody>
          </Card>
          <Card>
            <CardHeader>
              Polar Area Chart
              <div className="card-header-actions">
                <a href="http://www.chartjs.org" className="card-header-action">
                  <small className="text-muted">docs</small>
                </a>
              </div>
            </CardHeader>
            <CardBody>
              <div className="chart-wrapper">
                <Polar data={polar} options={options}/>
              </div>
            </CardBody>
          </Card>
        </CardColumns>
      </div>
    );
  }

Metrics = (props) => {
  const result = convertToMetricsArr(props.runningList);
  const cpuData = (100 - result[0]).toFixed(2);
  const memoryData = (100 - result[1]).toFixed(2);

  const cpu = {
    labels: [`Available: ${cpuData}%`, `Usage: ${result[0].toFixed(2)}%`],
    datasets: [
      {
        label: 'CPU',
        backgroundColor: ['rgba(44, 130, 201, 1)', 'rgba(19, 221, 29, 1)'],
        data: [cpuData, result[0]],
      },
    ],
  };

  const memory = {
    labels: [`Available: ${memoryData}%`, `Usage: ${result[1].toFixed(2)}%`],
    datasets: [
      {
        label: 'Memory',
        backgroundColor: ['rgba(44, 130, 201, 1)', 'rgba(19, 221, 29, 1)'],
        data: [memoryData, result[1]],
      },
    ],
  };

  const options = {
    tooltips: {
      enabled: false,
    },
    title: {
      display: true,
      text: 'MEMORY',
      fontSize: 23,
    },
    legend: { display: false, position: 'bottom' },
    responsive: true,
    maintainAspectRatio: true,
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          let sum = 0;
          const dataArr = ctx.chart.data.datasets[0].data;
          dataArr.map((data) => {
            sum += data;
          });
          const percentage = ((value * 100) / sum).toFixed(2) + '%';
          return percentage;
        },
        color: '#fff',
      },
    },
  };

  const options2 = {
    tooltips: {
      enabled: false,
    },
    title: {
      display: true,
      text: 'CPU',
      fontSize: 23,
    },
    legend: { display: false, position: 'bottom' },
    responsive: true,
    maintainAspectRatio: true,
    plugins: {
      datalabels: {
        formatter: (value, ctx) => {
          let sum = 0;
          const dataArr = ctx.chart.data.datasets[0].data;
          dataArr.map((data) => {
            sum += data;
          });
          const percentage = ((value * 100) / sum).toFixed(2) + '%';
          return percentage;
        },
        color: '#fff',
      },
    },
  };

  return (
    <div className='renderContainers'>
      <div className='header'>
        <h1 className='tabTitle'>Metrics</h1>
      </div>
      <div className='metric-section-title'>
        <h3>Aggregate</h3>
      </div>
      <div className='aggregate-conatiner'>
        <div className='pieChart'>
          <Pie data={cpu} options={options2} width={2000} height={1300} />
          <div className='legend-container'>
            <div className='legend-section'>
              <div className='avaliable-box'></div>
              <p className='legend-text'>Available {cpuData}%</p>
            </div>
            <div className='legend-section'>
              <div className='usage-box'></div>
              <p className='legend-text'>Usage {result[0].toFixed(2)}%</p>
            </div>
          </div>
        </div>

        <div className='pieChart'>
          <Pie data={memory} options={options} width={2000} height={1300} />
          <div className='legend-container'>
            <div className='legend-section'>
              <div className='avaliable-box'></div>
              <p className='legend-text'>Available {memoryData}%</p>
            </div>
            <div className='legend-section'>
              <div className='usage-box'></div>
              <p className='legend-text'>Usage {result[1].toFixed(2)}%</p>
            </div>
          </div>
        </div>

        <div className=''>
          <div className='chart-container'>
            <h1 className='chart-title'>NET IO:</h1>
            <p className='chart-number'>
              {result[2][0]}kB / {result[2][1]}kB
            </p>
          </div>
          <div className='chart-container'>
            <h1 className='chart-title'>BLOCK IO:</h1>
            <p className='chart-number'>
              {result[3][0]}B / {result[3][1]}B
            </p>
          </div>
        </div>
      </div>
      <LineChartDisplay />
    </div>
  );
}