{"id":17839,"date":"2019-04-02T14:13:01","date_gmt":"2019-04-02T12:13:01","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=17839"},"modified":"2026-01-12T11:22:22","modified_gmt":"2026-01-12T11:22:22","slug":"hc-7-1-announcement","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/product-updates\/hc-7-1-announcement\/","title":{"rendered":"Announcing Highcharts 7.1"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>&nbsp;<br \/>\nWe are pleased to announce Highcharts 7.1, the latest update to the industry-leading family of JavaScript charting libraries that include Highcharts, Highstock, Highmaps, and Highcharts Gantt.<\/p>\n<p>With new chart types, performance improvements, and updated documentation, the Highcharts family of products is easier to use and more powerful than ever before.<\/p>\n<p>Noteworthy updates include upgrades to the <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/packed-bubble-charts\">Packed Bubble Chart<\/a> and the introduction of the <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/organization-chart\">Organization Chart<\/a> and <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/item-chart\">Item (Parliament) chart<\/a>, and a host of <a href=\"https:\/\/www.highcharts.com\/docs\/accessibility\/accessibility-module\">accessibility<\/a> updates.<\/p>\n<p>Other new charts and updates include <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/dependency-wheel\">Dependency Wheel<\/a> series, <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/timeline-series\">Timeline<\/a> series, <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/networkgraph\">Network Graph<\/a>, <a href=\"https:\/\/www.highcharts.com\/docs\/gantt\/getting-started-gantt\">Gantt<\/a>, <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/pyramid-3d\">3D Pyramid<\/a>, and <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/funnel-3d\">3D Funnel<\/a>.<\/p>\n<p><i>See <a href=\"http:\/\/www.highcharts.com\/blog\/changelog\/\">changelog<\/a>, or read below for details and links to demos<\/i><\/p>\n<h2>Overview of new chart types<\/h2>\n<h3><b>Organization Chart<\/b><\/h3>\n<p>The organization chart, or org chart, for short, should be familiar to most. Apart from showing who\u2019s boss, it\u2019s great for illustrating all kinds of hierarchical information, including site-maps and information architecture diagrams. You may even use it for work-flow\/process visualizations (although Gantt, <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/sankey-diagram\">Sankey<\/a> or flow-charts may be more appropriate when flow is involved). As you\u2019d expect, org charts can be rendered top-down, or left-right.<\/p>\n<p>The <a href=\"https:\/\/api.highcharts.com\/highcharts\/series.organization\">API<\/a> is similar to the Sankey Chart, as both share the concept of nodes and links between them. However, org charts do not have a flow value, giving developers more control over node layout, making it possible to design great-looking cards and infographics.<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" style=\"width: 100%; height: 760px; border: none;\" src=\"\/samples\/embed\/highcharts\/demo\/organization-chart\" width=\"320\" height=\"290\"><\/iframe>\n<\/p>\n<p><i>Go <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/organization-chart\">here<\/a> for the developer documentation.<\/i><\/p>\n<h3><b>Item Chart\/Parliament Chart<\/b><\/h3>\n<p>There is no need for static infographics when trying to show the composition of any legislative body or group. The new Item Chart allows developers and designers to dynamically visualize the composition of different elements in a group, giving each item\/member a \u2018spot\u2019 on the chart. It also comes with presets for layouts such as semi-circle (Parliament) or rectangular.<\/p>\n<p>Similar chart types may be used for illustrating the relative size\/value difference between data series, such as the semi-circle pie chart. However, with Item Chart, values are rendered as individual dots (or any other SVG graphic) as opposed to a solid shape\/area that represents the \u201ctotal\u201d of each of the series. Additionally, the Item Chart features a (new) inactive state: When hovering over an element, other elements are dimmed.<\/p>\n<p>Technically, the data structure is a simple key\/value pair, so it can be easily swapped with a pie, column or other basic chart types, and vice-versa.<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" style=\"width: 100%; height: 540px; border: none;\" src=\"\/samples\/embed\/highcharts\/demo\/parliament-chart\" width=\"320\" height=\"240\"><\/iframe>\n<\/p>\n<p><i>Go <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/item-chart\">here<\/a> for the developer documentation.<\/i><\/p>\n<h3><b>Dependency Wheel Series<\/b><\/h3>\n<p>This chart type is ideal for displaying flows between elements, and as such, shares many similarities with our Sankey Chart. However, where Sankey shows flow with a direction, the Dependency Wheel is better suited for illustrating flow between nodes of equal rank or origin. Also, on a technical note, these chart types, along with the Network Graph, share a very similar <a href=\"https:\/\/api.highcharts.com\/highcharts\/series.dependencywheel\">API<\/a>.<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" style=\"width: 100%; height: 660px; border: none;\" src=\"\/samples\/embed\/highcharts\/demo\/dependency-wheel\" width=\"320\" height=\"240\"><\/iframe>\n<\/p>\n<p><i>Go <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/dependency-wheel\">here<\/a> for the developer documentation.<\/i><\/p>\n<h3><b>Timeline Series<\/b><\/h3>\n<p>The Timeline Series Chart (also known as timeline graph, timeline series, and linear timeline) allows the user to display events on a date-time axis with the ability to zoom in on certain timeframes.<\/p>\n<p>This chart type is ideal for presenting real-time events (along the time axis), or any chronological data, such as key moments in history.<\/p>\n<p>You may often have seen charts like these used for infographics, however, with Highcharts they become completely dynamic and responsive.<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" style=\"width: 100%; height: 630px; border: none;\" src=\"\/samples\/embed\/highcharts\/demo\/timeline\" width=\"320\" height=\"240\"><\/iframe>\n<\/p>\n<p><i>Go <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/timeline-series\">here<\/a> for the developer documentation.<\/i><\/p>\n<h3><b>3D Pyramid chart and 3D Funnel chart<\/b><\/h3>\n<p>The 3D Pyramid chart and 3D Funnel chart are a 3D version of our standard Funnel and Pyramid charts, often used to show sales and marketing data (e.g. the number of customers in different stages of the purchase process), but can also be used to display other data series of diminishing or increasing values. Visually the charts are similar, with the exception that the Pyramid Chart has its apex at the top, whereas the Funnel chart is inverted. They are also similar to a stacked percent bar chart, although its use-cases are different.<\/p>\n<p>Technically, the data structure is very simple (simply a list of values), and therefore easily interchangeable with any standard series type like pie, line, bar, etc.<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" style=\"width: 100%; height: 560px; border: none;\" src=\"\/samples\/embed\/highcharts\/demo\/funnel3d\" width=\"320\" height=\"240\"><\/iframe>\n<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" style=\"width: 100%; height: 560px; border: none;\" src=\"\/samples\/embed\/highcharts\/demo\/pyramid3d\" width=\"320\" height=\"240\"><\/iframe>\n<\/p>\n<p><i>Go <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/pyramid-3d\">here<\/a> for the developer documentation.<\/i><\/p>\n<h2>Updated Chart Types<\/h2>\n<p>In addition to the new chart types, the following charts have been upgraded for improved performance and additional features in release 7.1.<\/p>\n<h3><b>Packed Bubble Graph<\/b><\/h3>\n<p>The Packed Bubble Graph has been updated with an improved layout algorithm, for smoother animation and enhanced drag \u2018n drop (of nodes between series).<\/p>\n<p>This chart is great for displaying series with data with visible connections on the same diagram. One can also compare it to a bubble chart, but without an X and Y axis. Where the standard bubble chart shows three-dimensional data, the packed bubble shows one-dimensional data.<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" style=\"width: 100%; height: 885px; border: none;\" src=\"\/samples\/embed\/highcharts\/demo\/packed-bubble\" width=\"320\" height=\"240\"><\/iframe>\n<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" style=\"width: 100%; height: 860px; border: none;\" src=\"\/samples\/embed\/highcharts\/demo\/packed-bubble-split\" width=\"320\" height=\"240\"><\/iframe>\n<\/p>\n<p><i>Go <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/packed-bubble-charts\">here<\/a> for the developer documentation.<\/i><\/p>\n<h3><b>Network Graph<\/b><\/h3>\n<p>Network Graph chart type (aka. force-directed graph, social network) features improved algorithms for smoother animation.<\/p>\n<p>This chart type is ideal for showing relationships between nodes in the network, including circular connections, where there is no main root node, such as Friends on Facebook, related music\/artists, and various ontologies.<\/p>\n<p>A cool feature of this chart is that an end-user may change the layout of a graph by dragging nodes around the canvas.<\/p>\n<p>Technically, the Network Graph has a very similar API to Sankey and Dependency Wheel charts.<\/p>\n<p><iframe loading=\"lazy\" style=\"width: 100%; height: 900px; border: none;\" src=\"\/samples\/embed\/highcharts\/demo\/network-graph\" width=\"320\" height=\"240\"><\/iframe><\/p>\n<p><i>Go <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/networkgraph\">here<\/a> for the developer documentation.<\/i><\/p>\n<h3><b>Gantt<\/b><\/h3>\n<p>One of the most popular and powerful features of Highcharts Gantt, launched last year, was the ability to embed Highstock\u2019s range selector and navigator to zoom in on details in the chart. We have now incorporated this feature into Gantt, thus an additional Highstock license is no longer needed.<\/p>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" style=\"width: 100%; height: 570px; border: none;\" src=\"\/samples\/embed\/gantt\/demo\/with-navigation\" width=\"320\" height=\"240\"><\/iframe>\n<\/p>\n<p><i>Go <a href=\"https:\/\/www.highcharts.com\/docs\/gantt\/getting-started-gantt\">here<\/a> for the developer documentation.<\/i><\/p>\n<h3><b>Accessibility updates<\/b><\/h3>\n<p>Version 7.1 brings massive improvements to the Accessibility features of our charts. This includes an improved experience for screen reader users, support for dynamic data and drilldown, as well as support for voice input software. With this, we are excited to make even more advanced features of Highcharts available to users with disabilities.<\/p>\n<p><i>Go <a href=\"https:\/\/www.highcharts.com\/docs\/accessibility\/accessibility-module-feature-overview\">here<\/a> for the developer documentation.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Highcharts 7.1 brings updates to the Packed Bubble Chart and the introduction of the Organization and Item (Parliament) charts, as well as and a host of new accessibility features.<\/p>\n","protected":false},"author":32,"featured_media":17841,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1103],"tags":[1094],"coauthors":[699],"class_list":["post-17839","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/17839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=17839"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/17839\/revisions"}],"predecessor-version":[{"id":29192,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/17839\/revisions\/29192"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/17841"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=17839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=17839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=17839"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=17839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}