Skip to content

Instantly share code, notes, and snippets.

Last active Jan 8, 2020
What would you like to do?
(ArcGIS API for JavaScript) Sample of using chart.js with the Esri 4.7 API (Typescript version)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>ArcGIS JSAPI 4.6 TypeScript Demo</title>
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
<link rel="stylesheet" href="">
<script src=""></script>
var locationPath = location.pathname.replace(/\/[^\/]+$/, "");
window.dojoConfig = {
packages: [{
name: "app",
location: locationPath + "/app"
name: "chart.js",
location: ""
<script src=""></script>
<div id="viewDiv"></div>
import EsriMap = require("esri/Map");
import MapView = require("esri/views/MapView");
import FeatureLayer = require("esri/layers/FeatureLayer");
import PopupTemplate = require("esri/PopupTemplate");
import Popup = require("esri/widgets/Popup");
import Query = require("esri/tasks/support/Query");
import Chart = require("");
const featureLayerRenderer: any = {
type: "simple",
symbol: {
type: "simple-fill",
style: "solid",
color: "white",
const featureLayer: FeatureLayer = new FeatureLayer({
url: "",
definitionExpression: "STATE_NAME = 'California'",
renderer: featureLayerRenderer,
visible: true
const map: EsriMap = new EsriMap({
basemap: "dark-gray",
layers: [featureLayer]
const view: MapView = new MapView({
map: map,
container: "viewDiv",
center: [-118.244, 34.052],
zoom: 7,
popup: {
dockEnabled: true,
visible: false,
dockOptions: {
breakpoint: false,
buttonEnabled: false,
position: "auto"
// Create a query to get data from the feature layer
let query: Query = new Query();
query.returnGeometry = true;
query.outFields = ["STATE_NAME", "WHITE", "BLACK", "ASIAN", "HAWN_PI", "OTHER", "HISPANIC"];
query.where = "1=1";
query.num = 50;
// On view click, query the feature layer and pass the results to setContentInfo function.
view.on("click", (e) => {
query.geometry = e.mapPoint;
featureLayer.queryFeatures(query).then((results) => {
if(results.features[0].attributes.STATE_NAME === "California"){
view.popup.visible = true;{
title: "Doughnut Graph Example",
content: setContentInfo(results.features[0].attributes)
// Using the data from the feature layer, create a doughnut graph.
function setContentInfo(results: any): any {
// Create a new canvas element, this is where the graph will be placed.
let canvas: any = document.createElement('canvas'); = "myChart";
// Create a data object, this will include the data from the feature layer and other information like color or labels.
let data: any = {
data: [results.ASIAN, results.BLACK, results.HAWN_PI, results.HISPANIC, results.OTHER, results.WHITE],
backgroundColor: ["#4286f4", "#41f4be", "#8b41f4", "#e241f4", "#f44185", "#f4cd41"]
labels: [
//Create a new Chart and hook it to the canvas and then return the canvas.
let myPieChart: Chart = new Chart(canvas,{
type: 'doughnut',
data: data
return canvas;
Copy link

rhodul commented Jan 8, 2020

I have tried this even with @ts-ignore, but still I'm getting [TS2307] Build:Cannot find module ''.

Although, id does compile properly:
define(["require", "exports", ""]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment