How I Build A “Chart Library” For “Clarity Design System” Using Angular7 Directive

Angular7 is one of the hottest frameworks and VMware’s Clarity Design System made tremendous growth in just a few years. Using Angular7’s directive, Chart.js and keeping in mind that clarity doesn’t support inbuilt graphics library we tried to make one for the same. So let’s get started.

Let’s get started with the Installation process


Before you begin, make sure your development environment includes Node.js® and an npm package manager.

Step 1: Install the Angular CLI

Install the Angular CLI globally.

To install the CLI using npm, open a terminal/console window and enter the following command:

npm install -g @angular/cli

Step 2: Create a workspace and initial application

You develop apps in the context of an Angular workspace.

To create a new workspace and initial starter app:

  1. Run the CLI command ng new and provide the name “VMware clarity”, as shown here:
ng new VMware clarity

Step 3: Run the application

  1. Go to the workspace folder (VMware clarity).
  2. Launch the server by using the CLI command ng serve, with the --open option.
cd VMware clarity
ng serve --open

The ng serve the command launches the server, watches your files, and rebuilds the app as you make changes to those files.

The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

Your app greets you with a message:

Step 4: Install Clarity Packages

npm install @clr/icons @clr/angular @clr/ui @webcomponents/custom-elements@1.0.0 --save

Adding scripts and styles

If you are using the Angular CLI, you need to add angular.json file.

Find the scripts and styles arrays and add the following:

"styles": [
... any other styles
"scripts": [
... any existing scripts

Step 5: Installing Chart.js

Chart.js be installed via npm.

npm install chart.js --save

Creating a chart component

I have created a component chart by writing on the command line and enter the following command:

ng generate component chart 

which results in four files: chart.component.html, chart.component.scss, chart.component.spec.ts, and chart.component.ts file.

Adding Chart Component and Clarity module inapp.module.ts” file in your application:

Import the ClarityModule into your Angular application’s module as well as Chart Component. Some features also depend upon the BrowserAnimationsModuleso you should add it as well. Your application's main module might look like this:

app.module.ts file in your application in visual studio code

Writing the code

I have imported Chart.js in chart.component.ts file and the directive we have used here is “clr-charts.” You can see the code below for chart.component.ts file and chart.component.html file :

chart.component.html file
chart.component.ts file

In app.component.ts file:

Once the code is completed we can use “clr-charts” as a directive to display our charts using one directive that is “clr-charts” we can generate 6 types of charts including line chart, bar chart, pie chart, radar chart, doughnut chart, and polar area chart. In app.component.html file :

app.component.html file

So, pretty much we are done with this, In app.component.html file, we can see we are using a single directive “clr-charts” to display all other types of graphs and that’s what makes it more easy and reliable. Save all the files and run on the command line: open a terminal/console window and enter the following command:

ng serve
compiled successfully

That’s it we are done with this, open your browser and head to http://localhost:4200/

We can see that various charts are displayed on localhost using clr-charts.

line chart
bar chart

Pretty simple right :) In my next article I will be heading to the section how I generated a library for this project and published it on NPM as a package. Till that happy coding:) (Github)