Free Open Source HTML5 Report Library Chart.js for Data Visualization

As a tool for daily reporting, almost all enterprises will use it, and at present, several mainstream reporting tools on the market, such as Fansoft, Yonghong, Guanyuan, etc., their basic functions are free, but if you want to integrate with other products, you have to pay separately. As a free and open-source report product, Chart.js also supports the creation of various reports.
 

Here’s a simple configuration example:

histogram

var myBarChart = new Chart(ctx).Bar(data, options);

var data = {labels: ["January", "February", "March", "April", "May", "June", "July"],datasets: [{label: "My First dataset",fillColor: "rgba(220,220,220,0.5)",strokeColor: "rgba(220,220,220,0.8)",highlightFill: "rgba(220,220,220,0.75)",highlightStroke: "rgba(220,220,220,1)",data: [65, 59, 80, 81, 56, 55, 40]},{label: "My Second dataset",fillColor: "rgba(151,187,205,0.5)",strokeColor: "rgba(151,187,205,0.8)",highlightFill: "rgba(151,187,205,0.75)",highlightStroke: "rgba(151,187,205,1)",data: [28, 48, 40, 19, 86, 27, 90]}]};

• Radar chart

var myRadarChart = new Chart(ctx).Radar(data, options);

var data = {labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],datasets: [{label: "My First dataset",fillColor: "rgba(220,220,220,0.2)",strokeColor: "rgba(220,220,220,1)",pointColor: "rgba(220,220,220,1)",pointStrokeColor: "#fff",pointHighlightFill: "#fff",pointHighlightStroke: "rgba(220,220,220,1)",data: [65, 59, 90, 81, 56, 55, 40]},{label: "My Second dataset",fillColor: "rgba(151,187,205,0.2)",strokeColor: "rgba(151,187,205,1)",pointColor: "rgba(151,187,205,1)",pointStrokeColor: "#fff",pointHighlightFill: "#fff",pointHighlightStroke: "rgba(151,187,205,1)",data: [28, 48, 40, 19, 96, 27, 100]}]};