CORE LIBRARY
Tile map, honeycomb
Highcharts.chart('container', { chart: { type: 'tilemap', inverted: true, height: '80%' }, accessibility: { description: 'A tile map represents the states of the USA by ' + 'population in 2023. The hexagonal tiles are positioned to ' + 'geographically echo the map of the USA. A color-coded legend ' + 'states the population levels as below 1 million (beige), 1 to 5 ' + 'million (orange), 5 to 20 million (pink) and above 20 million ' + '(hot pink). The chart is interactive, and the individual state ' + 'data points are displayed upon hovering. Three states have a ' + 'population of above 20 million: California (38.9 million), ' + 'Texas (30.5 million) and Florida (22.6 million). The northern ' + 'US region from Massachusetts in the Northwest to Illinois in ' + 'the Midwest contains the highest concentration of states with a ' + 'population of 5 to 20 million people. The southern US region ' + 'from South Carolina in the Southeast to New Mexico in the ' + 'Southwest contains the highest concentration of states with a ' + 'population of 1 to 5 million people. 6 states have a population ' + 'of less than 1 million people; these include Alaska, Delaware, ' + 'Wyoming, North Dakota, South Dakota and Vermont. The state with ' + 'the lowest population is Wyoming in the Northwest with 584,153 ' + 'people.', screenReaderSection: { beforeChartFormat: '<h5>{chartTitle}</h5>' + '<div>{chartSubtitle}</div>' + '<div>{chartLongdesc}</div>' + '<div>{viewTableButton}</div>' }, point: { valueDescriptionFormat: '{index}. {xDescription}, {point.value}.' } }, title: { text: 'U.S. states by population in 2023', style: { fontSize: '1em' } }, subtitle: { text: 'Source:<a href="https://en.wikipedia.org/wiki/List_of_U.S._states_and_territories_by_population">Wikipedia</a>' }, xAxis: { visible: false }, yAxis: { visible: false }, colorAxis: { dataClasses: [{ from: 0, to: 1000000, color: '#F9EDB3', name: '< 1M' }, { from: 1000000, to: 5000000, color: '#FFC428', name: '1M - 5M' }, { from: 5000000, to: 20000000, color: '#FF7987', name: '5M - 20M' }, { from: 20000000, color: '#FF2371', name: '> 20M' }] }, tooltip: { headerFormat: '', pointFormat: 'The population of <b> {point.name}</b> is <b>' + '{point.value}</b>' }, plotOptions: { series: { dataLabels: { enabled: true, format: '{point.hc-a2}', color: '#000000', style: { textOutline: false } } } }, series: [{ name: '', data: [{ 'hc-a2': 'AL', name: 'Alabama', region: 'South', x: 6, y: 7, value: 5108468 }, { 'hc-a2': 'AK', name: 'Alaska', region: 'West', x: 0, y: 0, value: 733406 }, { 'hc-a2': 'AZ', name: 'Arizona', region: 'West', x: 5, y: 3, value: 7431344 }, { 'hc-a2': 'AR', name: 'Arkansas', region: 'South', x: 5, y: 6, value: 3067732 }, { 'hc-a2': 'CA', name: 'California', region: 'West', x: 5, y: 2, value: 38965193 }, { 'hc-a2': 'CO', name: 'Colorado', region: 'West', x: 4, y: 3, value: 5877610 }, { 'hc-a2': 'CT', name: 'Connecticut', region: 'Northeast', x: 3, y: 11, value: 3617176 }, { 'hc-a2': 'DE', name: 'Delaware', region: 'South', x: 4, y: 9, value: 1031890 }, { 'hc-a2': 'DC', name: 'District of Columbia', region: 'South', x: 4, y: 10, value: 678972 }, { 'hc-a2': 'FL', name: 'Florida', region: 'South', x: 8, y: 8, value: 22610726 }, { 'hc-a2': 'GA', name: 'Georgia', region: 'South', x: 7, y: 8, value: 11029227 }, { 'hc-a2': 'HI', name: 'Hawaii', region: 'West', x: 8, y: 0, value: 1435138 }, { 'hc-a2': 'ID', name: 'Idaho', region: 'West', x: 3, y: 2, value: 1964726 }, { 'hc-a2': 'IL', name: 'Illinois', region: 'Midwest', x: 3, y: 6, value: 12549689 }, { 'hc-a2': 'IN', name: 'Indiana', region: 'Midwest', x: 3, y: 7, value: 6862199 }, { 'hc-a2': 'IA', name: 'Iowa', region: 'Midwest', x: 3, y: 5, value: 3207004 }, { 'hc-a2': 'KS', name: 'Kansas', region: 'Midwest', x: 5, y: 5, value: 2940546 }, { 'hc-a2': 'KY', name: 'Kentucky', region: 'South', x: 4, y: 6, value: 4526154 }, { 'hc-a2': 'LA', name: 'Louisiana', region: 'South', x: 6, y: 5, value: 4573749 }, { 'hc-a2': 'ME', name: 'Maine', region: 'Northeast', x: 0, y: 11, value: 1395722 }, { 'hc-a2': 'MD', name: 'Maryland', region: 'South', x: 4, y: 8, value: 6180253 }, { 'hc-a2': 'MA', name: 'Massachusetts', region: 'Northeast', x: 2, y: 10, value: 7001399 }, { 'hc-a2': 'MI', name: 'Michigan', region: 'Midwest', x: 2, y: 7, value: 1037261 }, { 'hc-a2': 'MN', name: 'Minnesota', region: 'Midwest', x: 2, y: 4, value: 5737915 }, { 'hc-a2': 'MS', name: 'Mississippi', region: 'South', x: 6, y: 6, value: 2939690 }, { 'hc-a2': 'MO', name: 'Missouri', region: 'Midwest', x: 4, y: 5, value: 6196156 }, { 'hc-a2': 'MT', name: 'Montana', region: 'West', x: 2, y: 2, value: 1132182 }, { 'hc-a2': 'NE', name: 'Nebraska', region: 'Midwest', x: 4, y: 4, value: 1978379 }, { 'hc-a2': 'NV', name: 'Nevada', region: 'West', x: 4, y: 2, value: 3194176 }, { 'hc-a2': 'NH', name: 'New Hampshire', region: 'Northeast', x: 1, y: 11, value: 1402054 }, { 'hc-a2': 'NJ', name: 'New Jersey', region: 'Northeast', x: 3, y: 10, value: 9290841 }, { 'hc-a2': 'NM', name: 'New Mexico', region: 'West', x: 6, y: 3, value: 2114371 }, { 'hc-a2': 'NY', name: 'New York', region: 'Northeast', x: 2, y: 9, value: 19571216 }, { 'hc-a2': 'NC', name: 'North Carolina', region: 'South', x: 5, y: 9, value: 10835491 }, { 'hc-a2': 'ND', name: 'North Dakota', region: 'Midwest', x: 2, y: 3, value: 783926 }, { 'hc-a2': 'OH', name: 'Ohio', region: 'Midwest', x: 3, y: 8, value: 11785935 }, { 'hc-a2': 'OK', name: 'Oklahoma', region: 'South', x: 6, y: 4, value: 4053824 }, { 'hc-a2': 'OR', name: 'Oregon', region: 'West', x: 4, y: 1, value: 4233358 }, { 'hc-a2': 'PA', name: 'Pennsylvania', region: 'Northeast', x: 3, y: 9, value: 12961683 }, { 'hc-a2': 'RI', name: 'Rhode Island', region: 'Northeast', x: 2, y: 11, value: 1095926 }, { 'hc-a2': 'SC', name: 'South Carolina', region: 'South', x: 6, y: 8, value: 5373555 }, { 'hc-a2': 'SD', name: 'South Dakota', region: 'Midwest', x: 3, y: 4, value: 919318 }, { 'hc-a2': 'TN', name: 'Tennessee', region: 'South', x: 5, y: 7, value: 7126489 }, { 'hc-a2': 'TX', name: 'Texas', region: 'South', x: 7, y: 4, value: 30503301 }, { 'hc-a2': 'UT', name: 'Utah', region: 'West', x: 5, y: 4, value: 3417734 }, { 'hc-a2': 'VT', name: 'Vermont', region: 'Northeast', x: 1, y: 10, value: 647464 }, { 'hc-a2': 'VA', name: 'Virginia', region: 'South', x: 5, y: 8, value: 8715698 }, { 'hc-a2': 'WA', name: 'Washington', region: 'West', x: 2, y: 1, value: 7812880 }, { 'hc-a2': 'WV', name: 'West Virginia', region: 'South', x: 4, y: 7, value: 1770071 }, { 'hc-a2': 'WI', name: 'Wisconsin', region: 'Midwest', x: 2, y: 5, value: 5910955 }, { 'hc-a2': 'WY', name: 'Wyoming', region: 'West', x: 3, y: 3, value: 584057 }] }] });
CoreHeat and tree maps
Install with NPM
The official Highcharts NPM package comes with support for CommonJS and contains Highcharts, and its Stock, Maps and Gantt packages.
npm install highcharts --save
See more installation optionsDownload our library
The zip archive contains Javascript files and examples. Unzip the zip package and open index.html in your browser to see the examples.
DownloadBuy a license
You can download and try out all Highcharts products for free. Once your project/product is ready for launch, purchase a commercial license.
See License Pricing