Different types of charts exist, some of which includes bar chart, line chart, pie chart, radar chart, etc.

In this article, you will make use of a frontend framework called Angular as well as a JavaScript library called Chart.js to display data from a cryptocurrency platform called Coinranking. You will also make use of the Coinranking API to visualize a list of Cryptocurrencies along with their prices.

Prerequisites

To follow along with this tutorial, make sure you are familiar with the basics of the technologies listed below:

• HTML

• JavaScript

• TypeScript

• npm

Table of Contents

• How to Install and Create the Angular Application

• How to Integrate Chart.js in Angular

• How to Integrate the REST API

• How to Display the Data in the Chart

• Conclusion

You can also watch the video version of this article below, or on my YouTube channel:

How to Install and Create the Angular Application

Firstly, you need to install and set up Angular using the following steps:

Step 1: Install NPM (Node Package Manager)

To install npm, you need to download Node.js. This can be done through the Node.js website.

Node.js is an open-source cross platform server environment that can run on Windows, Linux, Unix, macOS, and more. It allows us to make use of npm to install libraries like Chart.js into our Angular application.

Step 2: Install the Angular CLI (Command Line Interface)

Once Node.js is installed, you can now download Angular into your machine with the terminal/command line using the command below:

npm install -g @angular/cli

To confirm Angular has been installed, you can view the version by running the command ng v, which will give us the result below:

Angular CLI Version

Step 3: Create a New Angular Project

Now that Angular has been installed, you can now create a new project by running the following commands in the terminal:

ng new ng-chart --routing=false --style=css
cd ng-chart
code .

With the commands above, we've created a new Angular project using the ng new command, disabled the routing and set the styling format to CSS.

Next, navigate into the project directory using the cd command, and open the project in Visual Studio Code.

You do not need to generate a new component for this project. You will use the two default files created by the Angular CLI — app.component.ts and app.component.hmtl — to render the chart. These files are in the app directory of your project.

The app.component.html file contains some boilerplate code which you need to get rid of. The Chart.js library can now be integrated into your application.

How to Integrate Chart.js in Angular

To add the chart.js library to the Angular app, you need to run the following command inside your terminal:

npm i chart.js

To confirm chart.js has been installed, you can check the package.json file in your project. You should see the chart.js version in the dependencies object shown in the image below:

Chart.js version

You can now import the chart.js library inside your project in the app.component.ts file as can be seen below:

import Chart from 'chart.js/auto';

Next, create a variable called chart and set it to an empty array:

chart: any = []

Navigate to the getting started page of the chart.js documentation and grab the boilerplate code with static data, and paste it into the ngOnInit lifecycle hook:

Note: The ngOnInit lifecycle hook in Angular gets triggered once after a component is initialized. That is, it gets called only when the first change detection occurs in an Angular component.

export class AppComponent {
  title = 'ng-chart';
  chart: any = [];

  constructor() {}

  ngOnInit() {
    this.chart = new Chart('canvas', {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
          {
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1,
          },
        ],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    });
  }
}

In the code above, within the data object, there is a labels key which contains an array with different values. Beneath that you have the datasets array which contains an object.

Within the object, there is an array called data with values of different numbers. These values represent the data that will get displayed on the chart in the browser.

Before the chart gets displayed in the browser, you'll need to also grab the <canvas></canvas> html tag and paste it in the app.component.html file as seen below:

<div>
  <canvas id="canvas">{{chart}}</canvas>
</div>

Note: In the app.component.html file, the <canvas> tag has an id called canvas. This must have the same name as the value inside the parentheses before the new Chart object in the app.component.ts file. If the names are not the same, the chart will not display.

You can now compile and serve the project by running the ng serve --open command in the terminal. You should have the following results:

Displaying the charts with static data

How to Integrate the REST API

To integrate the REST API, head over to the Coinranking website using this link. You should see a page like this:

Coinranking website

Start by clicking on the "Get API Key" button. You will be directed to a page where you can create an account and have access to an API key.

Copy the API key and open the environment.ts file in your Angular project. Within the object, create a variable called API_KEY and paste in the API key generated from CoinRanking as seen below:

export const environment = {
  production: false,
  API_KEY: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
};

Next, you need to copy the API to get all cryptocurrency coins from the CoinRanking documentation.

Coinranking API documentation

To use the API link copied above, you need to create an Angular Service by running the command below:

ng g service services/chart

With the chart.service.ts file created, you can now paste in the code that helps us consume the REST API as seen below:

To summarize the above code, here's what we did:

• We imported the HttpClient, HttpHeaders in line 2, as well as the environment file in line 3.

• Between line 5 and line 11, we created a variable called httpOptions. The httpOptions variable holds an object that contains the HttpHeaders configuration imported above. Here we set the content-type, passed the API_KEY variable from the environment file to the headers, and then set the Access-Control-Allow-Origin to a wildcard. This means the browser should allow request code from the origin.

• In line 17, we created a private variable called baseUrl to hold the REST API, while in line 28, we created a variable called proxyUrl to hold the CORS Anywhere link. The CORS Anywhere link is a NodeJS proxy that adds CORS headers to the proxied request and helps to prevent CORS errors in the process.

• In line 20, we injected the HttpClient into the constructor which makes it accessible within the Service.

• Finally, we created a function called cryptoData() in line 22. Within this function lies a variable called url. We used the url variable to append both the proxyUrl and baseUrl variables to construct our API. Furthermore, in the return statement, we used the get() http method to fetch the data from the REST API.

To make the HttpClient work, you need to import and inject the HttpClientModule into the app.module.ts file which can be seen below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

As seen above, the HttpClientModule was imported and injected into the imports array.

How to Display the Data in the Chart

To display the data on the chart, you need to head to the app.component.ts file and bring in your Chart service file as seen below:

• As seen above, we begin by importing the Chart Service and injecting it into our component in line 3 and line 17 respectively.

• We created three variables called result, coinPrice, and coinName. These variables will be used later in the project to hold data.

• Within the ngOnInit() lifecycle hook, we called the cryptoData() function in line 20, which returns an observable that gets subscribed to. This allows us to return a response from the data in the process.

• In line 21, we called the result variable using the this keyword and set it to hold the data.

• Next, in line 22 and line 23, we called the coinPrice and coinName variables, mapped through the data, and attached the coin price and coin name to them respectively.

• To see the results of the data in the browser, we used the console.log() function to display the data, as seen below:

Data from the CoinRanking API displayed on the console.

The final thing to be done is to plot the data seen in the image above into chart.

• As seen above, we first replaced the static data in the labels in line 12 with the coin name gotten from the CoinRanking API.

• Next, we replaced the static data in line 15 with the price gotten from the CoinRanking API.

Now compile the project by running the ng serve --open command and see the results in the browser as seen below:

Final results of the chart

Note: There is a possibility that you'll run into an error that says (Failed to load resource: the server responded with a status of 403 (Forbidden)) after compiling the project.

What you need to do is to click on the CORS Anywhere link in the console which will open up in a new tab, with a button that says Request temporary access to the demo server. Click the button and then refresh the page. The data should now reflect on the chart.

Conclusion

In this tutorial, you learned how to install and integrate the Chart.js library and a REST API in an Angular application. If you want access to the code base, you can clone the repo here on GitHub.

If you enjoyed this article, you can show your support by subscribing to my YouTube channel where I create awesome tutorials on web development technologies like JavaScript, React, Angular, Node.js, and more.

Data visualization is an essential part of data analysis. And charts are one of the most effective ways to present data in a clear and concise manner.

Marimekko charts are an excellent choice for displaying complex data sets in a compact and visually appealing format.

A Marimekko chart, also known as a mosaic chart or mekko chart, is a combination of a stacked bar chart and a 100% stacked bar chart. The width of each bar represents the total value of the corresponding category, and the height of each bar represents the relative contribution of each sub-category to that total.

In this tutorial, we will explore how to create a Marimekko chart using Chart.js, a powerful charting library. We'll delve into the details of how to structure the data for Marimekko charts, as well as how to customize the chart's appearance and behavior using Chart.js options and APIs.

Getting Started

I am assuming that you already have familiarity with creating simple line and bar charts using Chart.js in an Angular application. In this guide, there are certain concepts that will be easier to comprehend if you have prior knowledge.

Don't worry if you don't – I've got you covered. You can follow my Chart.js Tutorial – How to Make Bar and Line Charts in Angular to get started.

How to Structure Data for Marimekko Charts

Let's discuss the data structure required for Marimekko charts before creating the chart.

Marimekko charts need an array of objects, with each object representing a category. Each object must have a label and a sub-array of objects, where each sub-object represents a sub-category.

Each sub-object must have a label and a value. The value represents the proportion of the sub-category in relation to the total of its category.

Here's an example of how to structure data for a Marimekko chart:

data: [
  {
    label: 'Category 1',
    subcategories: [
      { label: 'Subcategory 1', value: 10 },
      { label: 'Subcategory 2', value: 20 },
      { label: 'Subcategory 3', value: 30 }
    ]
  },
  {
    label: 'Category 2',
    subcategories: [
      { label: 'Subcategory 1', value: 40 },
      { label: 'Subcategory 2', value: 50 },
      { label: 'Subcategory 3', value: 60 }
    ]
  }
]

In this example, we have two categories: Category 1 and Category 2, with three subcategories each. The values for the subcategories represent the proportion of the subcategory in relation to the total of its category. For example, in Category 1, Subcategory 1 represents 10 out of 60, or 16.7% of the total.

How to Create a Marimekko Chart with Chart.js

Now that we have our data structured correctly, let's move on to creating our Marimekko chart using Chart.js.

First, we need to create a canvas element in our HTML code to hold the chart:

<canvas id="marimekkoChart"></canvas>

Next, we'll need to install Chart.js and import it into our Angular component:

npm install chart.js

import Chart from 'chart.js/auto';

In our component class, we can then create a new Chart object and pass in our data and options:

ngAfterViewInit() {
  const canvas = document.getElementById('marimekkoChart') as HTMLCanvasElement;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;

  const data = {
    labels: ['Category 1', 'Category 2'],
    datasets: [
      {
        label: 'Subcategory 1',
        data: [10, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 2',
        data: [20, 50],
        backgroundColor: 'rgba(54, 162, 235, 0.7)',
        borderWidth: 1
      },
      {
        label: 'Subcategory 3',
        data: [30, 60],
        backgroundColor: 'rgba(255, 206, 86, 0.7)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    indexAxis: 'y',
    plugins: {
      legend: {
        position: 'bottom'
      }
    }
  };

  const marimekkoChart = new Chart(ctx, {
    type: 'bar',
    data: data,
  });
}

In this example, we're creating a Marimekko chart with three subcategories for two categories. We've set the type of chart to 'bar', and we're passing in our data and options. The 'indexAxis' option is set to 'y' to make the chart horizontal, and the 'legend' option is set to position the legend at the bottom of the chart.

Congratulations! If you have followed along carefully then you shouldn’t run into any errors and your output may look like the following:

And that's it! With this code, we can create a Marimekko chart in Chart.js in Angular.

You can further customize your chart using various Chart.js options and APIs, such as adjusting the colors, labels, and tooltip behaviors, to make it even more informative and engaging.

Conclusion

Chart.js is a very useful and powerful library. In this quick tutorial, we've covered how to create a Marimekko chart in Chart.js in Angular. If you want to include any type of chart in your Angular application, then it is very easy to make them with Chart.js.

The full code for this Angular application is hosted on my GitHub Repo.

I hope you found this tutorial helpful and informative. If you have any questions or feedback, feel free to to contact me on LinkedIn!

Related Articles I've Written about Chart.js:

• How to Make Bar and Line Charts using Chart.js in Angular
• Chart.js Tutorial – How to Make Pie and Doughnut Charts in Angular
• How to Add the Chart.js Zoom Plugin to an Angular App

Photo by Austin Distel on Unsplash.

In this tutorial we will learn how to create a simple pie and doughnut chart using the Chart.js library in an Angular application.

What is Chart.js?

Chart.js is a JavaScript library for building charts. It's designed to be intuitive and simple, but it's powerful enough to build complex visualizations.

It has a wide range of chart types, including bar charts, line charts, pie charts, scatter plots, and many more. Chart.js is open-source and can be used without any restrictions on private or commercial projects.

Prerequisites

Before we get started with making the charts, just make sure you meet the following prerequisites:

• Basic understanding of HTML /CSS and TypeScript especially the understanding of Object Oriented concepts of TypeScript classes and methods.
• Node.js version 10 or higher and NPM or Yarn package manager. You can download node.js from here.

How to Install Angular CLI

We will be using the Angular CLI to generate a starter application for our project. You can install Angular CLI by executing the following command on a terminal or Powershell window:

npm install -g @angular/cli

If you have Angular CLI installed already, you can skip this step.

How to Create a Angular Application

Now let’s create an Angular application that will hold our graphs. In a terminal, execute the following commands:

 ng new angular-chartjs

Now that our Angular application has been created, navigate to the project folder and start the local development server using the following command:

cd angular-chartjs
ng serve -o

A browser window will open on http://localhost:4200/ and you can see your running Angular application.

How to Install the Chart.js Package

Now open a new terminal window in the same directory and install the Chart.js library using the following:

npm install chart.js

Now we need to create two Angular components, one for the Pie graph and the other for the Doughnut chart. You can create them easily with the angular CLI by executing the following commands:

ng generate component pie-chart
ng generate component doughnut-chart

How to Create a Pie Chart in Chart.js

A pie chart is a circular graph that displays data in slices, where each slice represents a category of data. The size of each slice represents the proportion of the category in relation to the whole data set.

Pie charts are an effective way to show the breakdown of data into categories, especially when the data represents parts of a whole. They are useful when you want to show how much each category contributes to the total.

When to use pie charts:

• To show the proportions of different categories in a whole
• To compare the relative sizes of different categories
• To demonstrate how each category contributes to the whole

Pie charts are commonly used in business and economics to show the distribution of expenditures, market shares, or other aspects of the company's performance.

Now that we have created the components, we will move on with creating the pie chart.

Navigate to the /src/app/pie-chart component and open the pie-chart.component.html file and paste the following code:

<div class="chart-container">
      <canvas  id="MyChart" >{{ chart }}</canvas>
</div>

We have simply created a container, and inside that container a canvas with an id of MyChart. We have used Angular’s string interpolation to render the chart variable, which we will create soon.

Inside the pie-chart component, open the pie-chart.component.ts file and import the Chart.js library using the following command:

import Chart from 'chart.js/auto';

Now let’s make the chart variable we mentioned earlier. This variable will hold the information of our graphs.

public chart: any;

Now we will create a method for the pie chart. This will include the data and labels for our chart.

Copy the following code and paste it in the pie-chart.component.ts file below the ngOnInit() function:

createChart(){

    this.chart = new Chart("MyChart", {
      type: 'pie', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ['Red', 'Pink','Green','Yellow','Orange','Blue', ],
           datasets: [{
    label: 'My First Dataset',
    data: [300, 240, 100, 432, 253, 34],
    backgroundColor: [
      'red',
      'pink',
      'green',
            'yellow',
      'orange',
      'blue',            
    ],
    hoverOffset: 4
  }],
      },
      options: {
        aspectRatio:2.5
      }

    });
  }

Here we have set the type of chart as pie. We have given labels as the names of common colors. And we've added data values, which will be automatically allocated a portion of pie in the pie chart.

We want our createChart() function to run as soon as the page loads. In order to do that, we need to call the function in the ngOnInit():

ngOnInit(): void {
    this.createChart();
  }

Finally, we need to add the HTML selector of the pie-chart component to the app.component.html file. Remove the initial template code of Angular and add the following:

<app-pie-chart></app-pie-chart>

Save all the files and the browser window will refresh automatically. Your first pie chart is ready!

Our pie chart

How to Create a Doughnut Chart in Chart.js

A doughnut chart is a variation of the pie chart and serves the same purpose of representing data in a circular format. It is made up of multiple sectors, where each sector represents a data value, with the size of each sector proportional to its value.

You can use a doughnut chart:

• To show a parts-to-whole relationship in data
• To compare different categories of data
• To show progress towards a goal or target

Now we will move on with creating the doughnut chart. Since Doughnut charts and Pie charts can be used interchangeably, we don’t need to modify anything except the type of chart. Just follow the same steps you have done so far and make sure to do them on the doughnut chart component.

Paste the same code for createChart() method on the doughnut-chart.component.ts file below the ngOnInit() function. You just need to change the keyword for type of chart from pie to doughnut. Your code should look like the following:

createChart(){

    this.chart = new Chart("MyChart", {
      type: 'doughnut', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ['Red', 'Pink','Green','Yellow','Orange','Blue', ],
           datasets: [{
    label: 'My First Dataset',
    data: [300, 240, 100, 432, 253, 34],
    backgroundColor: [
      'red',
      'pink',
      'green',
            'yellow',
      'orange',
      'blue',            
    ],
    hoverOffset: 4
  }],
      },
      options: {
        aspectRatio:2.5
      }

    });
  }

Call the createChart() function in ngOnInit() and your line chart will be ready.

ngOnInit(): void {
    this.createChart();
  }

Finally, we need to add the HTML selector for the line-chart component to the app.component.html file.

<app-doughnut-chart></app-doughnut-chart>

Your output may look like the following:

Our doughnut chart

Conclusion

Chart.js is a very useful and powerful library. If you want to include any type of chart in your Angular application, then it is very easy to make them with Chart.js.

The full code for this Angular application is hosted on my GitHub Repo.

I hope you found this tutorial helpful. Thank you for reading!

Related Articles

• How to Make Bar and Line Charts using Chart.js in Angular

In this tutorial you will learn how to the Add Chart.js Zoom plugin to an Angular application.

When you have a lot of data in a chart, you may want to zoom in and see the details. Line charts are a good way to visualise large amounts of data. You can use the zooming feature in Chart.js to explore your data more closely.

Chart.js is an open-source library you can use to create beautiful charts in any part of your Angular application. The Zooming feature was created to allow you to magnify certain data points for closer inspection. You can quickly and easily zoom by scrolling with the mouse wheel.

Let's see how it works.

Getting Started

I'm going to assume that you already know how to use Chart.js in an Angular application to create simple line and bar charts.

Don't worry if you don't – I've got you covered. You can follow my Chart.js Tutorial – How to Make Bar and Line Charts in Angular to get started.

We will create a new Angular component just for the line chart and then incorporate the zoom plugin into it. We will be using a large amount of data to see how useful the Zoom plugin is.

But first, in your Angular application, you'll need to install the Chart.js Zoom plugin if you don't already have it.

Open up a new terminal in the Angular project folder and paste in the following command:

npm install chartjs-plugin-zoom

This will install the plugin into your Angular application.

Now let’s create a new Angular component and make the line chart. Use the following to create a new Angular component:

ng g c line-chart

This will create a new Angular component in the /src directory.

Then open the line-chart.component.html file and paste in the following code:

<div class="chart-container">
      <canvas  id="MyChart" >{{ chart }}</canvas>
</div>

Now open the line-chart.component.ts file and delete all the code inside it. Then paste in the following code:

import { Component, OnInit } from '@angular/core';
import Chart from 'chart.js/auto';

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.createChart();
  }
  public chart: any;

  createChart() {

    this.chart = new Chart("MyChart", {
      type: 'line', //this denotes tha type of chart

      data: {// values on X-Axis
        labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
          "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
        datasets: [
          {
            label: "Sales",
            data: ['467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573',
            '467', '576', '572', '79', '92', '574', '573', ],
            backgroundColor: 'blue',
            borderColor: "#084de0"
          }
        ]
      },
      options: {
        aspectRatio: 3
      }

    });
  }

}

Again, if you don’t know how this code works, you can always refer back to this Chart.js Tutorial.

We need to add the HTML selector of the line-chart component to the app.component.html file. Remove the initial template code of Angular and add the following:

<app-line-chart></app-line-chart>

Start the local development server using the following command:

ng serve -o

A browser window will open on http://localhost:4200/ and you can see your running Angular application.

As you can see, in order to present the entire chart, this graph begins to skip some labels. It will seem more worse if the graph has more data.

Let's now add a zooming function to our chart so we can enlarge the data points for a closer look.

How to Add the Chart.js Zoom Plugin

Open the line-chart.component.ts file and import the chart.js Zoom plugin. Make sure you register it after importing it. The following code will show you how to do it:

import zoomPlugin from 'chartjs-plugin-zoom';
Chart.register(zoomPlugin);

Now that you have imported the plugin, in the Chart.js option we will add the plugin and enable the zoom on the wheel.

options: {
        aspectRatio: 3,
        plugins: {
          zoom: {
            zoom: {
              wheel: {
                enabled: true,
              },
              pinch: {
                enabled: true
              },
              mode: 'xy',
            }
          }
        }
      }

As you can see , now we can zoom in into the point we want to see closely.

Wrapping Up

The full code for this Angular application is hosted on my GitHub.

I hope you found this tutorial helpful.If you have any questions or comments, please do not hesitate to contact me on LinkedIn. I'll be more than pleased to assist you with your questions.

Thank you for reading!

Photo by Isaac Smith on Unsplash

I’m working on a project to push sprint burndown information to distributed Scrum teams working in Slack. The entire application is serverless and running inside AWS. To generate burndown images I wanted to build a lambda function that creates an image, then pushes it to an S3 bucket. In this article, I’ll describe the solution I came up with.

First, the charting library. After investigating a number of options, I settled on the use of the ChartJS library. It’s a great charting library in Javascript that can render all sorts of graphs using the HTML5 canvas. Very flexible and configurable, too. But how do I run it, headless, inside of a lambda?

My first attempt was to create a simple lambda on my MacBook using three NPM packages: chart.js and two other libraries: chartjs-node-canvas and canvas-prebuilt. The former is a wrapper around ChartJS that supports rendering charts in node. The latter is a prebuilt, native version of the HTML5 canvas that allows rendering a canvas headlessly without a browser. I built the lambda with the serverless framework, a very useful tool to create and deploy serverless applications.

Here’s my sample lambda:

My lambda generated a sample graph and all looked well when I ran it locally. On AWS, though, it failed. What gives?

As it turns out, ChartJS uses native NPM modules to render directly to the canvas. Obviously, the native modules I use on my MacBook don’t run inside of a lambda. So what to do?

To run native modules inside a lambda, I needed to use the native libraries that the lambda runtime environment needs. So I fired up an instance of the lambda runtime AMI on EC2 and logged into it. There, I took the same lambda I built earlier and ran npm install on the EC2 instance. This downloads the native NPM libraries ChartJS needs but this time for the lambda runtime environment. With these libraries as part of the lambda function, ChartJS is able to render an image just as it normally would. Yay!

Contrary to normal NPM projects, I checked in the downloaded node modules into my git repository. When updating or building the graphing lambda, take care not to overwrite any of your dependencies. One side-effect of this approach is that I can no longer run the code on my local laptop to test.

Next up: store the image file generated in an S3 bucket. This was actually a fairly simple task with many code snippets available online to learn from. For completeness, here’s mine:

That’s it! Now you can generate images cheaply, on-demand!

Using native libraries is not without its problems though. I’ve had the entire setup work or fail depending on the exact version of canvas-prebuilt that I use. The current setup actually uses two. One transitive dependency via chartjs-node-canvas (2.0.0-alpha.14). One that I specify directly (1.6.5-prerelease.1). If I remove one of them the application fails to start due to some linking errors. YMMV.

I’ve put together a git repo with the sample code and binaries on it if you want to try it out. Check out the source code.

Martin works as VP Engineering for StackState where he and his teams are building a next-generation monitoring and AIOps product. As a side project, Martin is working on Sprintlr, a tool to improve distributed Scrum teams, and techfu.io, a tool to automatically assess technical talent.