Notus Angular Chartjs
The Chart.js charts refer to a graphical representation of data. Keep reading these simple yet flexible Javascript charting for designers & developers.
Usage
In order to use this charts, you will need to add inside your angular.json file the following:
{
...
"projects": {
"angular-landing-page": {
...
"architect": {
"build": {
...
"options": {
...
"allowedCommonJsDependencies": [ "chart.js" ],
...
},
...
},
...
}
}},
...
}So, inside your angular.json file, inside the build options, you will need to add this line "allowedCommonJsDependencies": [ "chart.js" ],.
After that, where you are going to use the charts, you will need to import them like so:
import Chart from "chart.js";Also, do not forget to install it:
npm i -E [email protected]After that, simply copy one of the code examples demonstrated below and include it in your page.
Examples
Line Chart Example
Overview
Sales value
<!-- component.html -->
<div
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-blueGray-700"
>
<div class="rounded-t mb-0 px-4 py-3 bg-transparent">
<div class="flex flex-wrap items-center">
<div class="relative w-full max-w-full flex-grow flex-1">
<h6 class="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
Overview
</h6>
<h2 class="text-white text-xl font-semibold">
Sales value
</h2>
</div>
</div>
</div>
<div class="p-4 flex-auto">
<!-- Chart -->
<div class="relative h-350-px">
<canvas id="line-chart"></canvas>
</div>
</div>
</div>// component.ts
import { Component, OnInit, AfterViewInit } from "@angular/core";
import Chart from "chart.js";
@Component({
selector: "app-card-line-chart",
templateUrl: "./card-line-chart.component.html",
})
export class CardLineChartComponent implements OnInit {
constructor() {}
ngOnInit() {}
ngAfterViewInit() {
var config = {
type: "line",
data: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
],
datasets: [
{
label: new Date().getFullYear(),
backgroundColor: "#4c51bf",
borderColor: "#4c51bf",
data: [65, 78, 66, 44, 56, 67, 75],
fill: false,
},
{
label: new Date().getFullYear() - 1,
fill: false,
backgroundColor: "#fed7d7",
borderColor: "#fed7d7",
data: [40, 68, 86, 74, 56, 60, 87],
},
],
},
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: false,
text: "Sales Charts",
fontColor: "white",
},
legend: {
labels: {
fontColor: "white",
},
align: "end",
position: "bottom",
},
tooltips: {
mode: "index",
intersect: false,
},
hover: {
mode: "nearest",
intersect: true,
},
scales: {
xAxes: [
{
ticks: {
fontColor: "rgba(255,255,255,.7)",
},
display: true,
scaleLabel: {
display: false,
labelString: "Month",
fontColor: "white",
},
gridLines: {
display: false,
borderDash: [2],
borderDashOffset: [2],
color: "rgba(33, 37, 41, 0.3)",
zeroLineColor: "rgba(0, 0, 0, 0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
yAxes: [
{
ticks: {
fontColor: "rgba(255,255,255,.7)",
},
display: true,
scaleLabel: {
display: false,
labelString: "Value",
fontColor: "white",
},
gridLines: {
borderDash: [3],
borderDashOffset: [3],
drawBorder: false,
color: "rgba(255, 255, 255, 0.15)",
zeroLineColor: "rgba(33, 37, 41, 0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
},
},
};
let ctx: any = document.getElementById("line-chart") as HTMLCanvasElement;
ctx = ctx.getContext("2d");
new Chart(ctx, config);
}
}This component is already defined inside src/app/components/cards/card-line-chart. Check it out.
Bar Chart Example
Performance
Total orders
<!-- component.html -->
<div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded"
>
<div class="rounded-t mb-0 px-4 py-3 bg-transparent">
<div class="flex flex-wrap items-center">
<div class="relative w-full max-w-full flex-grow flex-1">
<h6 class="uppercase text-blueGray-400 mb-1 text-xs font-semibold">
Performance
</h6>
<h2 class="text-blueGray-700 text-xl font-semibold">
Total orders
</h2>
</div>
</div>
</div>
<div class="p-4 flex-auto">
<!-- Chart -->
<div class="relative h-350-px">
<canvas id="bar-chart"></canvas>
</div>
</div>
</div>// component.ts
import { Component, OnInit, AfterViewInit } from "@angular/core";
import Chart from "chart.js";
@Component({
selector: "app-card-bar-chart",
templateUrl: "./card-bar-chart.component.html",
})
export class CardBarChartComponent implements OnInit, AfterViewInit {
constructor() {}
ngOnInit() {}
ngAfterViewInit() {
let config = {
type: "bar",
data: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
],
datasets: [
{
label: new Date().getFullYear(),
backgroundColor: "#e53e3e",
borderColor: "#e53e3e",
data: [30, 78, 56, 34, 100, 45, 13],
fill: false,
barThickness: 8,
},
{
label: new Date().getFullYear() - 1,
fill: false,
backgroundColor: "#4c51bf",
borderColor: "#4c51bf",
data: [27, 68, 86, 74, 10, 4, 87],
barThickness: 8,
},
],
},
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: false,
text: "Orders Chart",
},
tooltips: {
mode: "index",
intersect: false,
},
hover: {
mode: "nearest",
intersect: true,
},
legend: {
labels: {
fontColor: "rgba(0,0,0,.4)",
},
align: "end",
position: "bottom",
},
scales: {
xAxes: [
{
display: false,
scaleLabel: {
display: true,
labelString: "Month",
},
gridLines: {
borderDash: [2],
borderDashOffset: [2],
color: "rgba(33, 37, 41, 0.3)",
zeroLineColor: "rgba(33, 37, 41, 0.3)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
yAxes: [
{
display: true,
scaleLabel: {
display: false,
labelString: "Value",
},
gridLines: {
borderDash: [2],
drawBorder: false,
borderDashOffset: [2],
color: "rgba(33, 37, 41, 0.2)",
zeroLineColor: "rgba(33, 37, 41, 0.15)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
},
},
};
let ctx: any = document.getElementById("bar-chart");
ctx = ctx.getContext("2d");
new Chart(ctx, config);
}
}This component is already defined inside src/app/components/cards/card-bar-chart. Check it out.
Props
If you want to see more examples and properties please check the official ChartJS Documentation.
You can also check the Official ChartJS Github Repository.