Detailed chart/diagram library research

a24vinla commented

2026-04-13 11:44:36 +00:00

Collaborator

We need to research libraries for displaying and making charts. Please post a thorough review of each examples in the comments to enable a formal evaluation. Refer to Issue #123 for libraries.

Parent Issue: #111

We need to research libraries for displaying and making charts. Please post a thorough review of each examples in the comments to enable a formal evaluation. Refer to Issue #123 for libraries. Parent Issue: #111

a24vinla added the

frontEnd

research

labels

2026-04-13 11:44:36 +00:00

c24elipe commented

2026-04-13 12:52:59 +00:00

Collaborator

Good inspiration may be:
#185

Good inspiration may be: https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/185

c24carso self-assigned this

2026-04-13 14:41:47 +00:00

c24carso commented

2026-04-14 08:16:13 +00:00

Collaborator

Recharts is built for React, uses SVG rendering. It has recently been updated and since it naturally uses React components it's a good fit for our project. The documentation is extensive, making it easy to get started.

Pros:

Built for react
One of the most popular react chart libraries
Actively maintained

Cons:

Less customizable than the others

Recharts is built for React, uses SVG rendering. It has recently been updated and since it naturally uses React components it's a good fit for our project. The documentation is extensive, making it easy to get started. Pros: - Built for react - One of the most popular react chart libraries - Actively maintained Cons: - Less customizable than the others

c24carso commented

2026-04-14 08:30:05 +00:00

Collaborator

Charts.js (react-chartjs-2) is a popular JavaScript chart library with an official React wrapper called react-chartjs-2. It handles large amounts of data better than the other two options because of the way it renders. It's not built specifically for react so you configure charts through settings objects instead of building them with components.

Pros:

Good with large datasets
Large community/documentation
Many different types of charts

Cons:

Requires a wrapper
Different approach to building charts than we do in our project with other things.

Charts.js (react-chartjs-2) is a popular JavaScript chart library with an official React wrapper called react-chartjs-2. It handles large amounts of data better than the other two options because of the way it renders. It's not built specifically for react so you configure charts through settings objects instead of building them with components. Pros: - Good with large datasets - Large community/documentation - Many different types of charts Cons: - Requires a wrapper - Different approach to building charts than we do in our project with other things.

c24carso commented

2026-04-14 08:34:47 +00:00

Collaborator

Google charts is google's own chart library with a react wrapper. It has a large variety of chart types and some unique ones. The charts are loaded from google's servers so it needs internet connection to work.

Pros:

Large variety of charts
Google maintains it

Cons:

Needs internet connection to work

Google charts is google's own chart library with a react wrapper. It has a large variety of chart types and some unique ones. The charts are loaded from google's servers so it needs internet connection to work. Pros: - Large variety of charts - Google maintains it Cons: - Needs internet connection to work

c24carso added the

needs review

label

2026-04-14 08:35:23 +00:00

a24danwe was assigned by c24elipe

2026-04-14 09:19:56 +00:00

a24danwe commented

2026-04-14 11:55:41 +00:00

Collaborator

Review on Chart library research.

The current research provides a correct overview over these 3 libraries but a very basic one. While the descriptions of the features and what is good and bad is generally correct, it lacks some depth and comparison. This makes it hard to conclude exactly which one of these libraries is most fit for our project.

Recharts: The overview is accurate, but the claim that it is "Less customizable than the others" is very unclear. According to Recharts own documentation it states that it has extensive customization through react components. It would be good to clarify in what way it is less customizable and also compared to which library. It is also not mentioned how it handles large data sets or how it performs.

Charts.js: This overview is correct, but while it is descriptive in how it describes that it can handle large datasets it does not explain why that is the case, for example its use of canvas rendering which improves the performance.

Google charts: This overview is also correct but it is limited. It explains the requirement of needing internet but does not go into what that means. This could affect the reliability as the all of the charts used will not work without a stable internet connection.

Overall, everything looks factually correct and is a great start to choosing which chart library is most suitable for our project. What is missing is a little more in depth research and comparison between the libraries.

Review on Chart library research. The current research provides a correct overview over these 3 libraries but a very basic one. While the descriptions of the features and what is good and bad is generally correct, it lacks some depth and comparison. This makes it hard to conclude exactly which one of these libraries is most fit for our project. Recharts: The overview is accurate, but the claim that it is "Less customizable than the others" is very unclear. According to Recharts own [documentation](https://mintlify.wiki/recharts/recharts/concepts/customization) it states that it has extensive customization through react components. It would be good to clarify in what way it is less customizable and also compared to which library. It is also not mentioned how it handles large data sets or how it performs. Charts.js: This overview is correct, but while it is descriptive in how it describes that it can handle large datasets it does not explain why that is the case, for example its use of canvas rendering which improves the performance. Google charts: This overview is also correct but it is limited. It explains the requirement of needing internet but does not go into what that means. This could affect the reliability as the all of the charts used will not work without a stable internet connection. Overall, everything looks factually correct and is a great start to choosing which chart library is most suitable for our project. What is missing is a little more in depth research and comparison between the libraries.

a24danwe added

reviewed

and removed

needs review

labels

2026-04-14 11:56:06 +00:00

a24vinla closed this issue

2026-04-20 11:10:27 +00:00

Rows
Columns

Detailed chart/diagram library research #260