Jari
WWasp-lang
•Created by Jari on 9/12/2023 in #đŸ™‹questions
Problem with recharts
Hello!
This is my MainPage.jsx:
import getHinnat from '@wasp/queries/getHinnat'
import { useQuery } from '@wasp/queries'
import logout from '@wasp/auth/logout'
import Chart from "./chart.jsx";
const MainPage = ({ user }) => {
const { data: hinnat, boolean: hinnatLoading, error: error2 } = useQuery(getHinnat)
return (
<div className="App">
How to use Recharts with React
<Chart data={hinnat} />
</div>
)
}
export default MainPage
and this is chart.jsx:
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
} from "recharts";
export default function Chart({ data }) { return ( <ResponsiveContainer width="100%" height={400}> <BarChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5, }} > <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="startDate" /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="price" fill="#8884d8" /> </BarChart> </ResponsiveContainer> ); }
export default function Chart({ data }) { return ( <ResponsiveContainer width="100%" height={400}> <BarChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5, }} > <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="startDate" /> <YAxis /> <Tooltip /> <Legend /> <Bar dataKey="price" fill="#8884d8" /> </BarChart> </ResponsiveContainer> ); }
6 replies