ardhi
2 years ago
2 changed files with 68 additions and 3 deletions
@ -0,0 +1,65 @@
|
||||
import React, { useEffect, useState } from 'react'; |
||||
import axios from 'axios' |
||||
import { Bar } from 'react-chartjs-2'; |
||||
|
||||
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; |
||||
|
||||
const data = { |
||||
labels, |
||||
datasets: [ |
||||
{ |
||||
label: 'Dataset 1', |
||||
borderColor: 'rgb(255, 99, 132)', |
||||
backgroundColor: 'rgba(255, 99, 132, 0.5)', |
||||
data: [] |
||||
}, |
||||
{ |
||||
label: 'Dataset 2', |
||||
borderColor: 'rgb(53, 162, 235)', |
||||
backgroundColor: 'rgba(53, 162, 235, 0.5)', |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
|
||||
const options = { |
||||
indexAxis: 'y', |
||||
elements: { |
||||
bar: { |
||||
borderWidth: 2, |
||||
}, |
||||
}, |
||||
responsive: true, |
||||
plugins: { |
||||
legend: { |
||||
position: 'right', |
||||
}, |
||||
title: { |
||||
display: true, |
||||
text: 'Chart.js Horizontal Bar Chart', |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
const DashboardPMO = () => { |
||||
const token = localStorage.getItem("token") |
||||
const HEADER = { |
||||
headers: { |
||||
"Content-Type": "application/json", |
||||
"Authorization": `Bearer ${token}` |
||||
} |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<div> |
||||
<Bar |
||||
options={options} |
||||
data={data} |
||||
/> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
export default DashboardPMO; |
Loading…
Reference in new issue