How can I import Highcharts or any other third-party library into Observable frameworks? I have tried the method mentioned in the Observable Framework documentation, such as: import * as Highcharts from 'npm:highcharts'; but it’s not working. Please suggest what I might be doing wrong.
You need to use a slightly different import:
```js echo
import Highcharts from "npm:highcharts";
```
```js
// Data retrieved https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature
const container = display(document.createElement("div"));
Highcharts.chart(container, {
chart: {
type: "spline"
},
title: {
text: "Monthly Average Temperature"
},
subtitle: {
text:
"Source: " +
'<a href="https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature" ' +
'target="_blank">Wikipedia.com</a>'
},
xAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
accessibility: {
description: "Months of the year"
}
},
yAxis: {
title: {
text: "Temperature"
},
labels: {
format: "{value}°"
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: "#666666",
lineWidth: 1
}
}
},
series: [
{
name: "Tokyo",
marker: {
symbol: "square"
},
data: [
5.2,
5.7,
8.7,
13.9,
18.2,
21.4,
25.0,
{
y: 26.4,
marker: {
symbol: "url(https://www.highcharts.com/samples/graphics/sun.png)"
},
accessibility: {
description: "Sunny symbol, this is the warmest point in the chart."
}
},
22.8,
17.5,
12.1,
7.6
]
},
{
name: "Bergen",
marker: {
symbol: "diamond"
},
data: [
{
y: 1.5,
marker: {
symbol: "url(https://www.highcharts.com/samples/graphics/snow.png)"
},
accessibility: {
description: "Snowy symbol, this is the coldest point in the chart."
}
},
1.6,
3.3,
5.9,
10.5,
13.5,
14.5,
14.4,
11.5,
8.7,
4.7,
2.6
]
}
]
});
```
2 Likes
Could you please provide guidance on importing Highcharts other modules such as Highcharts Map, Stock, Gantt, and others like More, Exporting, Accessibility?
I don’t know, I’ve never used this library. Can you share what you have tried so far?
This is my div structure
World Map Demo
${resize((width) => drawWorldMap(width))}
JavaScript Method
function drawWorldMap(width){
const container = document.getElementById(“MapContainer”);
(async () => {
const topology = await fetch(
‘https://code.highcharts.com/mapdata/custom/world-continents.topo.json’
).then(response => response.json());
// Prepare demo data. The data is joined to map using value of 'hc-key'
// property by default. See API docs for 'joinBy' for more info on linking
// data and map.
const data = [{
'hc-key': 'af', // Africa
value: 1,
color: '#FF6347',
Name:"Akash"
}, {
'hc-key': 'as', // Asia
value: 2,
color: '#FFD700'
}, {
'hc-key': 'eu', // Europe
value: 3,
color: '#4169E1'
},
{
'hc-key': 'sa', // South America
value: 4,
color: '#FFA500'
},
{
'hc-key': 'na', // North America
value: 5,
color: '#00FF00'
},
{
'hc-key': 'oc', // Oceania
value: 6,
color: '#B0E0E6'
},
]
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: topology
},
title: {
text: 'Highcharts Maps basic demo'
},
subtitle: {
text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world-continents.topo.json">World continents</a>'
},
colorAxis: {
visible: false // Hide the color axis
},
tooltip: {
pointFormat: `${data[0].Name} : ${data[0].value}`
},
series: [{
data: data,
name: 'Random data',
states: {
color: 'none'
},
dataLabels: {
enabled: true,
formatter: function() {
return this.point.name + '<br><div style="">' + this.point.value + '</div>';
},
}
}]
});
})();
}
@imakashram You’ll have to wrap your markup in a code block, otherwise the HTML won’t display.
Apparently you need to import from highcharts/highmaps; here’s a solution that seems to work:
## World Map Demo
<div class="grid grid-cols-1">
<div class="card">${await drawWorldMap(width)}</div>
</div>
```js
import Highcharts from "https://esm.sh/highcharts/highmaps";
async function drawWorldMap(width) {
const container = document.createElement("div");
const topology = await fetch("https://code.highcharts.com/mapdata/custom/world-continents.topo.json").then(
(response) => response.json()
);
// Prepare demo data. The data is joined to map using value of 'hc-key'
// property by default. See API docs for 'joinBy' for more info on linking
// data and map.
const data = [
{
"hc-key": "af", // Africa
value: 1,
color: "#FF6347",
Name: "Akash"
},
{
"hc-key": "as", // Asia
value: 2,
color: "#FFD700"
},
{
"hc-key": "eu", // Europe
value: 3,
color: "#4169E1"
},
{
"hc-key": "sa", // South America
value: 4,
color: "#FFA500"
},
{
"hc-key": "na", // North America
value: 5,
color: "#00FF00"
},
{
"hc-key": "oc", // Oceania
value: 6,
color: "#B0E0E6"
}
];
// Create the chart
Highcharts.mapChart(container, {
chart: {
map: topology
},
title: {
text: "Highcharts Maps basic demo"
},
subtitle: {
text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world-continents.topo.json">World continents</a>'
},
colorAxis: {
visible: false // Hide the color axis
},
tooltip: {
pointFormat: `${data[0].Name} : ${data[0].value}`
},
series: [
{
data: data,
name: "Random data",
states: {
color: "none"
},
dataLabels: {
enabled: true,
formatter: function () {
return this.point.name + '<br><div style="">' + this.point.value + "</div>";
}
}
}
]
});
return container;
}