Streamgraph
const colors = Highcharts.getOptions().colors; Highcharts.chart('container', { chart: { type: 'streamgraph', marginBottom: 30, zooming: { type: 'x' } }, // Make sure connected countries have similar colors colors: [ colors[0], colors[1], colors[2], colors[3], colors[4], // East Germany, West Germany and Germany Highcharts.color(colors[5]).brighten(0.2).get(), Highcharts.color(colors[5]).brighten(0.1).get(), colors[5], colors[6], colors[7], colors[8], colors[9], colors[0], colors[1], colors[3], // Soviet Union, Russia Highcharts.color(colors[2]).brighten(-0.1).get(), Highcharts.color(colors[2]).brighten(-0.2).get(), Highcharts.color(colors[2]).brighten(-0.3).get(), Highcharts.color(colors[2]).brighten(-0.4).get() ], title: { floating: true, align: 'left', text: 'Winter Olympic Medal Wins' }, subtitle: { floating: true, align: 'left', y: 30, text: 'Source: <a href="https://www.olympedia.org/statistics">olympedia.org</a>' }, xAxis: { maxPadding: 0, type: 'category', crosshair: true, categories: [ '', '1924 Chamonix', '1928 St. Moritz', '1932 Lake Placid', '1936 Garmisch-Partenkirchen', '1940 <i>Cancelled (Sapporo)</i>', '1944 <i>Cancelled (Cortina d\'Ampezzo)</i>', '1948 St. Moritz', '1952 Oslo', '1956 Cortina d\'Ampezzo', '1960 Squaw Valley', '1964 Innsbruck', '1968 Grenoble', '1972 Sapporo', '1976 Innsbruck', '1980 Lake Placid', '1984 Sarajevo', '1988 Calgary', '1992 Albertville', '1994 Lillehammer', '1998 Nagano', '2002 Salt Lake City', '2006 Turin', '2010 Vancouver', '2014 Sochi', '2018 PyeongChang', '2022 Beijing' ], labels: { align: 'left', reserveSpace: false, rotation: 270 }, lineWidth: 0, margin: 20, tickWidth: 0 }, yAxis: { visible: false, startOnTick: false, endOnTick: false, minPadding: 0.1, maxPadding: 0.15 }, legend: { enabled: false }, annotations: [{ labels: [{ point: { x: 5.5, xAxis: 0, y: 30, yAxis: 0 }, text: 'Cancelled<br>during<br>World War II' }, { point: { x: 18, xAxis: 0, y: 90, yAxis: 0 }, text: 'Soviet Union fell,<br>Germany united' }, { point: { x: 24.25, xAxis: 0, y: 140, yAxis: 0 }, text: 'Russia banned from<br>the Olympic Games<br> in 2017' }], labelOptions: { backgroundColor: 'rgba(255,255,255,0.5)', borderColor: 'silver' } }], plotOptions: { series: { label: { minFontSize: 5, maxFontSize: 15, style: { color: 'rgba(255,255,255,0.75)' } }, accessibility: { exposeAsGroupOnly: true } } }, // Data parsed with olympic-medals.node.js series: [{ name: 'Finland', data: [ 0, 11, 4, 3, 6, 0, 0, 6, 9, 7, 8, 10, 5, 5, 7, 9, 13, 7, 7, 6, 12, 7, 9, 5, 5, 6, 8 ] }, { name: 'Austria', data: [ 0, 3, 4, 2, 4, 0, 0, 8, 8, 11, 6, 12, 11, 5, 6, 7, 1, 10, 21, 9, 17, 17, 23, 16, 17, 14, 18 ] }, { name: 'Sweden', data: [ 0, 2, 5, 3, 7, 0, 0, 10, 4, 10, 7, 7, 8, 4, 2, 4, 8, 6, 4, 3, 3, 7, 14, 11, 15, 14, 18 ] }, { name: 'Norway', data: [ 0, 17, 15, 10, 15, 0, 0, 10, 16, 4, 6, 15, 14, 12, 7, 10, 9, 5, 20, 26, 25, 25, 19, 23, 26, 39, 37 ] }, { name: 'U.S.', data: [ 0, 4, 6, 12, 4, 0, 0, 9, 11, 7, 10, 7, 7, 8, 10, 12, 8, 6, 11, 13, 13, 34, 25, 37, 28, 23, 25 ] }, { name: 'East Germany', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 14, 19, 23, 24, 25, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] }, { name: 'West Germany', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 5, 10, 5, 4, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] }, { name: 'Germany', data: [ 0, 0, 1, 2, 6, 0, 0, 0, 7, 2, 8, 9, 0, 0, 0, 0, 0, 0, 26, 24, 29, 36, 29, 30, 19, 31, 27 ] }, { name: 'Netherlands', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 2, 2, 9, 9, 6, 4, 0, 7, 4, 4, 11, 8, 9, 8, 24, 20, 17 ] }, { name: 'Italy', data: [ 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 1, 4, 4, 5, 4, 2, 2, 5, 14, 20, 10, 13, 11, 5, 8, 10, 17 ] }, { name: 'Canada', data: [ 0, 1, 1, 7, 1, 0, 0, 3, 2, 3, 4, 3, 3, 1, 3, 2, 4, 5, 7, 13, 15, 17, 24, 26, 25, 29, 26 ] }, { name: 'Switzerland', data: [ 0, 3, 1, 1, 3, 0, 0, 10, 2, 6, 2, 0, 6, 10, 5, 5, 5, 15, 3, 9, 7, 11, 14, 9, 11, 15, 15 ] }, { name: 'Great Britain', data: [ 0, 4, 1, 0, 3, 0, 0, 2, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 2, 1, 2, 1, 1, 4, 5, 2 ] }, { name: 'France', data: [ 0, 3, 1, 1, 1, 0, 0, 5, 1, 0, 3, 7, 9, 3, 1, 1, 3, 2, 9, 5, 8, 11, 9, 11, 15, 15, 14 ] }, { name: 'Hungary', data: [ 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3 ] }, { name: 'Soviet Union', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 21, 25, 13, 16, 27, 22, 25, 29, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] }, { name: 'Unified Team', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 0, 0, 0, 0, 0, 0, 0, 0 ] }, { name: 'Russia', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 23, 18, 13, 22, 15, 33, 0, 0 ] }, { name: 'ROC', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 32 ] }, { name: 'Japan', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 3, 0, 1, 1, 1, 7, 5, 10, 2, 1, 5, 8, 13, 18 ] }, { name: 'Czechoslovakia', data: [ 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 4, 3, 1, 1, 6, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0 ] }, { name: 'Poland', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 2, 2, 6, 6, 2, 1 ] }, { name: 'Spain', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 1 ] }, { name: 'China', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 8, 8, 11, 11, 9, 9, 15 ] }, { name: 'South Korea', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 6, 6, 4, 11, 14, 8, 17, 9 ] }, { name: 'Czech Republic', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 4, 6, 8, 7, 2 ] }, { name: 'Belarus', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 1, 1, 3, 6, 3, 2 ] }, { name: 'Kazakhstan', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2, 0, 0, 1, 1, 1, 0 ] }, { name: 'Bulgaria', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 3, 1, 0, 0, 0, 0 ] }, { name: 'Denmark', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0 ] }, { name: 'Ukraine', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 0, 2, 0, 2, 1, 1 ] }, { name: 'Australia', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 2, 3, 3, 3, 4 ] }, { name: 'Belgium', data: [ 0, 1, 1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 2 ] }, { name: 'Romania', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] }, { name: 'Liechtenstein', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0 ] }, { name: 'Yugoslavia', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] }, { name: 'Luxembourg', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0 ] }, { name: 'New Zealand', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 3 ] }, { name: 'North Korea', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0 ] }, { name: 'Slovakia', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 1, 3, 2 ] }, { name: 'Croatia', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 3, 3, 1, 0, 0 ] }, { name: 'Slovenia', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 1, 0, 3, 8, 2, 7 ] }, { name: 'Latvia', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 4, 1, 1 ] }, { name: 'Estonia', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 1, 0, 0, 1 ] }, { name: 'Uzbekistan', data: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0 ] }], exporting: { sourceWidth: 800, sourceHeight: 600 } });
CoreArea charts
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