Introduction :
A simple to use charting toolkit for HTML5 and Javascript is called CanvasJS. It works on a variety of platforms, including desktops, Microsoft Surface, iPhone, iPad, and Android. As a result, you can build rich dashboards that are functional on all devices without sacrificing maintainability.
- Very basic and user-friendly API; you can start using it right away.
- features elegant and lovely-looking themes.
- exemplary performance
- works with all current technology.
- CanvasJS is independent, not reliant on any other libraries.
- Dedicated assistance from developers.
How to add CanvasJs to your Web pages :
1. Two Source files are included in the downloaded Zip package.
canvasjs.js, an uncompressed file (available only in the Paid Version)
Canvasjs.min.js is a compressed file.
2. Include the file in your web page’s tag.
<head> <script type="text/javascript" src="canvasjs.min.js"></script> </head>
Now you can set your data into chart :
app.component.html :
<div id="chartContainer" style="height: 200px; width: 100%;"> </div>
app.component.ts :
ngOnInit(): void {
var chart = new CanvasJS.Chart("chartContainer",
{
axisX: {
tickLength: 0,
lineThickness: 0,
labelFontColor: "#A3AED0",
},
axisY: {
gridColor: "#C6CCE1",
lineThickness: 0,
gridThickness: 1,
labelFontColor: "#A3AED0",
},
data: [
{
type: "spline",
markerType: "none",
lineThickness: 3,
lineColor: "#4318FF",
dataPoints: [
{ y: 120, label: "Jan" },
{ y: 170, label: "Feb" },
{ y: 120, label: "Mar" },
{ y: 180, label: "Apr" },
{ y: 140, label: "May" },
{ y: 160, label: "Jun" },
]
},
{
type: "spline",
markerType: "none",
lineThickness: 3,
lineColor: "#6AD2FF",
dataPoints: [
{ y: 40, label: "Jan" },
{ y: 100, label: "Feb" },
{ y: 60, label: "Mar" },
{ y: 120, label: "Apr" },
{ y: 90, label: "May" },
{ y: 100, label: "Jun" },
]
}
]
});
chart.render();
}
Output :
