amcharts
Chart js is loaded with powerful features to fulfill your data-visualization needs. Look at some of the key features of amcharts. For more details
Direct <script> include
directly include it in your html
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>HTML Code
<div id="am-simple-chart" class="custom-chart"></div>Script
if (jQuery("#am-simple-chart").length && am4core.ready(function () {
am4core.useTheme(am4themes_animated);
var e = am4core.create("am-simple-chart", am4charts.XYChart);
e.colors.list = [am4core.color("#089bab")], e.data = [{
country: "USA",
visits: 2025
}, {
country: "China",
visits: 1882
}, {
country: "Japan",
visits: 1809
}, {
country: "UK",
visits: 1122
}, {
country: "France",
visits: 1114
}];
var t = e.xAxes.push(new am4charts.CategoryAxis);
t.dataFields.category = "country", t.renderer.grid.template.location = 0, t.renderer.minGridDistance = 30, t.renderer.labels.template.adapter.add("dy", function (e, t) {
return t.dataItem && !0 & t.dataItem.index ? e + 25 : e
});
e.yAxes.push(new am4charts.ValueAxis);
var a = e.series.push(new am4charts.ColumnSeries);
a.dataFields.valueY = "visits", a.dataFields.categoryX = "country", a.name = "Visits", a.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]", a.columns.template.fillOpacity = .8;
var n = a.columns.template;
n.strokeWidth = 2, n.strokeOpacity = 1
}));