Graphly - React Components documentation
Graphly is designed to facilitate creating charts for your personal use or for your website dashboards. Learn everything about how to get started using our React Components below.
You should NEVER send a request from the client. Always send a request to our API from your server. This is due to the fact that we require a secret API key to authenticate your request.
Get started
Pick your framework
NextJS Example
Install graphly-api and graphly-charts library from NPM
npm install graphly-api graphly-charts
Add your secret API key to your .env file
Generate your API key1GRAPHLY_API_KEY=YOUR_API_KEY_HERECreate a chart component, make sure it is a Client Component by using "use client" directive
1"use client";
2
3import React from 'react'
4import {GraphlyChartWithDataType} from "graphly-api";
5import GraphlyChart from "graphly-charts";
6
7export default function ChartComponent({chart}: {chart: GraphlyChartWithDataType | null}) {
8 return (
9 <div>
10 {chart && (
11 <GraphlyChart chart={chart} />
12 )}
13 </div>
14 )
15}New fetch your chart from the server. You can either fetch it from a server component or your own API route.
Note: Fetching a chart doesn't count as a API request in your plan usage.
1import graphly, {GraphlyChartWithDataType} from "graphly-api";
2import ChartComponent from "@/components/chart-component";
3
4export default async function Home() {
5
6 const response = await graphly.fetchChart({
7 apiKey: process.env.GRAPHLY_API_KEY!,
8 chartId: "5968d1f5-5e1c-42c3-b081-2f0496ff4dc9",
9 });
10
11 const chart = response.data;
12
13 return (
14 <div className="max-w-screen-2xl mx-auto py-20">
15 <ChartComponent chart={chart} />
16 </div>
17 );
18}React Example with Express Server as example
The React way of implementing the chart is the same as NextJS. The only difference is that NextJS is using a server component. With React, you would need to make a API request to your server ex: Express server.
Client Setup
Install graphly-api and graphly-charts library from NPM. graphly-api is to get access to the Typescript types.
npm install graphly-api graphly-charts
In your page, fetch from your server the chart data.
1import GraphlyChart from "graphly-charts";
2
3export default function Home() {
4
5 const [chart, setChart] = useState(null)
6
7 useEffect(() => {
8 fetch("http://localhost:3000/api/chart/xyz")
9 .then(response => response.json())
10 .then(data => setChart(data));
11 }, []);
12
13 return (
14 <div className="max-w-screen-2xl mx-auto py-20">
15 {chart && (
16 <GraphlyChart chart={chart} />
17 )}
18 </div>
19 );
20}Server Setup
Install graphly-api library from NPM on your Server
npm install graphly-api
Add your secret API key to your .env file
Generate your API key1GRAPHLY_API_KEY=YOUR_API_KEY_HEREYour server API endpoint ex: "http://localhost:3000/api/chart/xyz" should look something like this: (Example with ExpressJS)
1import graphly from "graphly-api";
2
3app.post("/api/chart/xyz", async (req, res) => {
4 try {
5 const response = await graphly.fetchChart({
6 apiKey: process.env.GRAPHLY_API_KEY!,
7 chartId: "5968d1f5-5e1c-42c3-b081-2f0496ff4dc9",
8 });
9
10 const chart = response.data;
11
12 res.status(200).json(chart);
13 } catch(error) {
14 res.status(500).json({ message: "Server Error" });
15 }
16})© 2025 Graphly - Evovee Interactives, Inc.
Made in Canada 🍁