diff --git a/src/pages/Dashboard/BalanceLineChart/LineChart.tsx b/src/pages/Dashboard/BalanceLineChart/LineChart.tsx index 1390ebc4..031e73fc 100644 --- a/src/pages/Dashboard/BalanceLineChart/LineChart.tsx +++ b/src/pages/Dashboard/BalanceLineChart/LineChart.tsx @@ -10,7 +10,6 @@ import { Legend, } from 'chart.js'; import { Line } from 'react-chartjs-2'; -import faker from 'faker'; ChartJS.register( CategoryScale, @@ -22,7 +21,9 @@ ChartJS.register( Filler, Legend ); + const exampleData = [ + { id: 1, year: 2016, @@ -53,23 +54,25 @@ const exampleData = [ userGain: 4300, userLost: 234 } + ]; -const labelsEx = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; +const years = exampleData.map(item => item.year.toString()); +const userGains = exampleData.map(item => item.userGain); const data = { - labels: labelsEx, + labels: years, datasets: [ { - label: 'Dataset', - data: exampleData, - borderColor: 'light-red', - backgroundColor: 'light-red', + label: 'User Gain', + data: userGains, + borderColor: 'red', + backgroundColor: 'red', fill: true, - start: true, - origin: true + } ] }; + const config = { type: 'line', data: data, @@ -88,6 +91,7 @@ const config = { } }, }; + const options = { responsive: true, plugins: { @@ -96,13 +100,13 @@ const options = { }, title: { display: true, - text: 'Chart.js Line Chart', + text: 'User Gain Over Years', }, }, }; + const LineChart = () => { - return ; - } -export default LineChart; \ No newline at end of file + +export default LineChart;