This library is very easy to implement. In my work, I just insert a canvas and CDN in my HTML, and edit the chart in JavaScript. This library is free and don't need the licence. There's no watermark which is great. I'm following this bar chart example from the library. It's easy to make it work. And I followed the documentation to make some modifications. For example, I find a way to group two bars together, one shows the usage and another shows the satisfaction. I also added some hover effect on the bars. By searching on the Internet, I found that this site is very popular and a lot of people share their problems and solutions. This library is canvas-based. There are 9 types of charts available. I also managed to add animation to the chart. I tried to change the canvas background using the plug-in but I failed. Instead, I use my own CSS to do it, which is also recommeded in the documentation.
Data source: www.communicationcrafts.com
I built this pie chart using Google Charts. It is a SVG-based library. It has tons of different charts which I think is amazing. You can find any chart you want here. The documentation is very easy to follow. I made a 3D pie chart here. The example is very customizable. I changed the pie chart position, the colors of slices. I also change the font size of the title. You don't need licence for using this library and there's no watermark. It's might be hard to follow if you don't know about JavaScript, since there's no example for option code. I want to add a subtitle to the chart but I can't find the setting. And the shape is not shown in DOM since it's SVG, which makes it difficult to target the element we want to style.
Data source: medium.com
| Junior | $38,799 |
|---|---|
| Middle | $53,052 |
| Senior | $76,793 |
This chart library is a CSS based library, which I think is very interesting. Instead of using JS, this one just use html and CSS to build charts. I browsed the library and found that it basically uses table element to build charts. It does't need the licence. There are some basic styles of charts, not too many, but quite a bit. I'm following the example from the documentation. And it's the esiest one among these three libraries, because it's using CSS. On the other hand, it might be a little hard to change something I want, for example, I want to change the position of the x-axis lables. I want to make them vertically aligned with the salary number. But I can't do it and all the examples in this library have the same position for x-axis labels. Since it's a new library, there's no answer when I'm trying to Google it. And the code in the library may cause some validation errors. I don't like this library.
Data source: devoxsoftware.com
I gained a lot of experience using these libraries. chart.js and google charts are very popular and has many options for us to customize, while charts.css is relatively new and not many people discuss it online. I made the first chart as bar chart and when I look at chart.js, I found there's a cool animation for line chart. I was hoping I can find a similar one when I use other library to buld the line chart. Unfortunately, I didn't find it in charts.css. So next time, if I want to use line chart, I'd go for chart.js. I also recommeded google charts, it has many styles and the documention is very easy to follow. I'm glad that two of the charting libraries I chose works smoothly.