Chart.JS
If you’re looking for a really simple way to visualize your data, then you’ve come to the right place. I recently did a project with classmates, and in the project, our team found about a really cool JavaScript library called Chart.JS. Chart.JS is a user friendly tool that allows users to display data sets in a variety of different ways.
The way Chart.JS works is that it reads a chart as on object. The different properties, and values you give to that object will change how the graph looks. For example, the “type” property will change the type of graph it displays. with this property, you can choose between line charts, bar charts, pie charts, scatter charts, and many more. The “datasets” properties allows you to style your graph. If you ever decide to implement Chart.JS on a project, I would refer to Chart.JS’s documentation on whatever chart you choose, because some charts may have dataset properties that differ from other charts. Some common different groups of styling properties you can add find across multiple charts ( but not all ) would be stuff like line styling ( The style of the line on your chart), point styling ( style of the data points on your chart ), and interactions ( allows you to add styling to your data points if is user hovers over it with their mouse ).
The line styling can include stuff like “borderColor” (color of the line in your chart ), borderWidth ( width of line ), “fill” ( fills in the area below the line ), “tension” ( the sharpness of corners from one data point to the next ), and more. Some common properties you can find in point styling would be stuff like “pointRadius” ( radius of point ), “pointHitRadius” ( radius that mouse can hit ), and “pointBackgroundColor” ( fills color of point ).With the interactions properties you can find stuff like “pointHoverBackgroundColor” (color of point when hovered with mouse ), and “pointHoverRadius” ( radius of point when hovered with mouse ). There are plenty of other properties for styling but, these are all some common ones that can be added to most charts. There are also some other really cool options you can give your graph that i don’t mention wont mention (like animations), simply because there are too many of them .
After using Chart.JS in my last project I definitely think its really cool, easy to use, tool that I would recommend to just about anyone looking to display visual data on their website.
