{"id":22725,"date":"2022-08-19T11:14:51","date_gmt":"2022-08-19T11:14:51","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=22725"},"modified":"2026-01-13T11:25:16","modified_gmt":"2026-01-13T11:25:16","slug":"highcharts-with-stazy","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/use-cases\/highcharts-with-stazy\/","title":{"rendered":"Highcharts with Stazy"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/stazy.de\/en\/welcome\" target=\"_blank\" rel=\"noopener\">Stazy<\/a> offers a portfolio management tool that helps users to collect and aggregate information and dependencies across all structures \u2013 top-down and bottom-up. The tool creates dashboards to provide at a glance a global visibility, improve decision making, save time and resources, etc.<\/p>\n<p>We pay particular importance to offering the right dashboards to our users. That requirement doesn&#8217;t come without challenges that we have to overcome constantly. The main challenge is to provide a data visualization library that is highly interactive, stylish, and very responsive that suits all our users&#8217; needs; and, at the same time, easy to learn, simple to configure, and with good technical support to our internal development team. After careful selection, we realized that the Highcharts data visualization library checks all the requirements. We managed to make our users pleased with our portfolio management tool and our tech team happy with the Highcharts data visualization library.<\/p>\n<p>Here is an example of one of our dashboards:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-22742 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/25085502\/stazy-dashboard-560x315.png\" alt=\"A dashboard displays company information using different chart types\" width=\"560\" height=\"315\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/25085502\/stazy-dashboard-560x315.png 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/25085502\/stazy-dashboard-760x428.png 760w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/25085502\/stazy-dashboard-768x432.png 768w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/25085502\/stazy-dashboard.png 1200w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><\/p>\n<p>From a technical point of view, the Highcharts library is part of the frontend built with ReactJS.<\/p>\n<p>Let&#8217;s take a closer look to see how easy it is to create a visualization using the toot and Highcharts library:<\/p>\n<p>The following example displays a bubble chart with plot lines. The X-axis represents the amount of total effect, and the Y-axis represents Strategy Alignment Index.<br \/>\nThe Plot Lines tip you where the projects with high Strategy Impact, Low or High Effect are. In addition, the bubbles are colored according to the Project&#8217;s Main Strategy, and the total Budget measures their size.<\/p>\n<h2>Set up a bubble chart in Stazy<\/h2>\n<p>Now, let\u2019s see how to configure such a chart in four simple steps:<br \/>\n1. Create a new chart and fill in the general information such as name, description, and permissions sets:<br \/>\n<a href=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110453\/general-configuration.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-22731 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110453\/general-configuration.jpg\" alt=\"\" width=\"582\" height=\"214\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110453\/general-configuration.jpg 921w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110453\/general-configuration-560x206.jpg 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110453\/general-configuration-760x279.jpg 760w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110453\/general-configuration-768x282.jpg 768w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" \/><\/a><\/p>\n<p>2. Choose the type of chart you want to create:<br \/>\n<a href=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110647\/common-chart-settings.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-22732 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110647\/common-chart-settings.jpg\" alt=\"\" width=\"574\" height=\"208\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110647\/common-chart-settings.jpg 954w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110647\/common-chart-settings-560x203.jpg 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110647\/common-chart-settings-760x276.jpg 760w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110647\/common-chart-settings-768x279.jpg 768w\" sizes=\"auto, (max-width: 574px) 100vw, 574px\" \/><\/a><\/p>\n<p>3. The most important part of the configuration consists of data fields or tables. To create a bubble chart, you need to define X\/ Y\/ and Z axis (size of a bubble) and set up a couple of other settings:<br \/>\n<a href=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110725\/x-axis-data-field.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-22733 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110725\/x-axis-data-field.jpg\" alt=\"\" width=\"565\" height=\"275\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110725\/x-axis-data-field.jpg 920w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110725\/x-axis-data-field-560x273.jpg 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110725\/x-axis-data-field-760x370.jpg 760w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110725\/x-axis-data-field-768x374.jpg 768w\" sizes=\"auto, (max-width: 565px) 100vw, 565px\" \/><\/a><\/p>\n<p>4. Click the Save button and check the result, or you can also add some plot lines to the chart:<br \/>\n<a href=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110814\/plot-lines.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-22734 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110814\/plot-lines.jpg\" alt=\"\" width=\"556\" height=\"148\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110814\/plot-lines.jpg 920w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110814\/plot-lines-560x149.jpg 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110814\/plot-lines-760x202.jpg 760w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2022\/08\/19110814\/plot-lines-768x205.jpg 768w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/a><\/p>\n<p>That is it; you have a ready-to-use powerful, and effective dashboard.<\/p>\n<p>We are happy to satisfy our customers and our internal tech team by offering an intelligent solution with a suitable data visualization library.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Highcharts library offers many valuable and practical business benefits. Learn more from Stazy company experience and how Highcharts library helped to overcome Stazy challenge to satisfy our customers and our internal tech team by offering an intelligent solution with a suitable data visualization library.<\/p>\n","protected":false},"author":268,"featured_media":22743,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[933],"tags":[788,1094,824],"coauthors":[957,699],"class_list":["post-22725","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-use-cases","tag-finance","tag-highcharts-core","tag-react"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22725","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\/268"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=22725"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22725\/revisions"}],"predecessor-version":[{"id":29370,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22725\/revisions\/29370"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/22743"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=22725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=22725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=22725"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=22725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}