Skip to content

Instantly share code, notes, and snippets.

@jon-a-nygaard
Last active October 18, 2021 11:16
Show Gist options
  • Save jon-a-nygaard/7b9b8c164325f564a2e6464acf4271be to your computer and use it in GitHub Desktop.
Save jon-a-nygaard/7b9b8c164325f564a2e6464acf4271be to your computer and use it in GitHub Desktop.
Example of Highcharts in use with TypeScript

Example of Highcharts in use with TypeScript

Install

  1. Download source files
  2. Run npm install to install all dependencies.
  3. Run npm run build to bundle src/app.js into dist/bundle.js

Open application

  1. Open index.html in a browser.

Note

Notice that imports should be done as the following:

// Do this. Import entire module into a single variable. 
import * as Highcharts from 'highcharts';
// Do not do this. Works only with modules who exports a default
import Highcharts from 'highcharts'
{
"name": "highcharts-typescript",
"version": "1.0.0",
"description": "Example of Highcharts in use with TypeScript",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "Jon Arild Nygård",
"license": "ISC",
"dependencies": {
"highcharts": "^5.0.12"
},
"devDependencies": {
"awesome-typescript-loader": "^3.1.3",
"typescript": "^2.3.3",
"webpack": "^2.6.1"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example of Highcharts in use with TypeScript</title>
</head>
<body>
<div id="container"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
{
"compilerOptions": {
"outDir": "./dist/",
"strictNullChecks": true,
"module": "commonjs",
"target": "es5",
"allowJs": true
},
"include": [
"./src/"
]
}
module.exports = {
entry: './src/app.ts',
output: {
filename: './dist/bundle.js'
},
resolve: {
extensions: [".ts", ".js"]
},
module: {
rules: [
{ test: /\.(t|j)sx?$/, use: { loader: 'awesome-typescript-loader' } }
]
}
}
@ashok-sc
Copy link

You haven't included any types for highcharts..or provided any examples of using Highharts in a .ts file..

@drewkiimon
Copy link

You haven't included any types for highcharts..or provided any examples of using Highharts in a .ts file..

My thoughts exactly. Lmao.

@jon-a-nygaard
Copy link
Author

Hi, I do not remember the exact use case for the gist anymore as its been a while, but I assume it was meant as a showcase/workaround to simply load and utilize Highcharts in a TypeScript project.
There has been a lot of development in Highcharts regarding TypeScript support since this gist was created, so you should look to Highcharts Type Declarations and Load Highcharts as a transpiled ES6/UMD module for more up to date information 🙂

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