map = {
const div = html`<div style="height: 700px;">`;
Highcharts.mapChart(div, {
chart: {
map: nzSimpleFiltered
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text:
'Source map: <a href="http://code.highcharts.com/mapdata/countries/nz/nz-all.js">New Zealand</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
stops: stopsLegend,
tickAmount: numberOfSteps + 1,
layout: 'horizontal'
},
tooltip: {
shared: true,
useHTML: true,
headerFormat: '{point.key}<table>',
pointFormat:
'<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right">{point.value} </td></tr>',
footerFormat: '</table>',
valueDecimals: 0
},
series: [
{
data: data,
name: 'Random data',
borderColor: '#fff',
states: {
hover: {
borderColor: '#000',
brightness: 0
}
},
dataLabels: {
enabled: true,
format: '{point.name}',
style: {
fontWeight: 'normal'
}
}
}
]
});
return div;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
