{"id":13898,"date":"2017-11-09T11:06:29","date_gmt":"2017-11-09T10:06:29","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=13898"},"modified":"2026-01-12T09:33:43","modified_gmt":"2026-01-12T09:33:43","slug":"turning-data-insights-use-data-visualization-storytelling","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/best-practices\/turning-data-insights-use-data-visualization-storytelling\/","title":{"rendered":"Turning Data Into Insights-How to use Data Visualization for Storytelling"},"content":{"rendered":"<p>Data storytelling is an amazing way to bring data to life by assigning meaning and context to data by combining numbers, words and visuals, when sharing insights with your audience.<\/p>\n<p>Data visualizations allow you to communicate complex ideas as well as help your audience see the big picture, whether they are used to monitor day-to-day operations, investigate risks, or simply explore new growth opportunities for your business.<\/p>\n<p>Here are five ways to use visualizations to tell data stories.<\/p>\n<h3>1. Choose the right visualization<\/h3>\n<p>Choosing the wrong visualization is one of the most common mistakes people commit while visualizing data. This makes it really difficult to derive insights from your data. In some cases, it can even confuse or even misguide the viewers. Let\u2019s look at the example below:<\/p>\n<p><iframe title=\"Highcharts pie chart. Monthly sales trend\" style=\"width: 100%; height: 470px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/pie-monthly-sales-trends\n\" allow=\"fullscreen\"><\/iframe><\/p>\n<p>Is pie chart the right visualization to show monthly sales numbers? First of all, the viewer will end up wasting time between the pie slices and chart legend. Secondly, it\u2019s almost impossible to see know if your sales grow\/fall month-on-month. To make things worse, the percentage numbers (e.g. 33% for August) for each slice don\u2019t add any value.<\/p>\n<p>Now let\u2019s look at the same chart using another visualization.<\/p>\n<p><iframe title=\"Highcharts line chart. Monthly sales trend\" style=\"width: 100%; height: 470px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/line-monthly-sales-trend\" allow=\"fullscreen\"><\/iframe><\/p>\n<p>In the above chart, the bump in sales is clearly visible even though it presents much less information than the pie chart. However, the challenge with this chart is that the scale starts at 200, where you might expect to find a value of zero. Thus, at first glance you may believe were no sales in May. It is also not clear what the y-axis represents. Is it dollars, units, metric tons?<\/p>\n<p>Secondly, a line chart like this makes it look as if sales grew linearly from month to month. However, we only have four data points, thus we can\u2019t support everything the chart indicates, for example, that mid-June sales were at 225. While there is always some level of visual interpolation inherent with line charts, one must make a judgment call as to what best serves the purpose of the data story.<\/p>\n<h3>2. Use speaking titles<\/h3>\n<p>One of the most effective ways to tell data stories is to create a narrative through your titles (and subtitles). Typically, people title their visualizations with the same information that can also be obtained by looking at the chart. Here\u2019s an example:<\/p>\n<p><iframe title=\"Highcharts bar chart. Monthly sales trend\" style=\"width: 100%; height: 470px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/bar-monthly-sales-trend\" allow=\"fullscreen\"><\/iframe><\/p>\n<p>In the above chart, if you look at the legend and x-axis, it\u2019s evident that it provides monthly sales data for the past four months. Furthermore, it is clear that each column represents the cumulative sales for each month. And with labeling the y-axis, it is clear what measurement is used to track sales.<\/p>\n<p>Now, let\u2019s look at the same chart with a speaking title.<\/p>\n<p><iframe title=\"Highcharts bar chart. SEO monthly sales trend\" style=\"width: 100%; height: 470px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/seo-montly-sales-trend\" allow=\"fullscreen\"><\/iframe><\/p>\n<p>In the above chart, the title tells you that the sales trends you see are due to the SEO campaign that was carried out over the past few months. In this case, the viewer not only gets more information than what is presented in the visualization but also doesn\u2019t have to figure out what to make of the numbers. You are directly telling them a story of what has happened due to your SEO efforts, and what they should be looking at.<\/p>\n<p>After looking at the 1st chart, the viewer would wonder \u201cWhy do the sales grow in August?\u201d and your team would get busy investigating the underlying cause. On the other hand, after looking at the 2nd chart, the viewer already knows the answer to his question.<\/p>\n<p>The key is to present your insights in the title, instead of stating what the data is about and letting viewers look for insights on their own.<\/p>\n<h3>3. Use colors strategically<\/h3>\n<p>While using visualizations to tell your story, one needs to be careful with using colors.<\/p>\n<p>Colors provide an effective way to highlight the relationship between data. Let\u2019s look at the dashboard below:<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13901\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/09102737\/Screen-Shot-2017-11-09-at-10.27.13.png\" alt=\"\" width=\"558\" height=\"308\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/09102737\/Screen-Shot-2017-11-09-at-10.27.13.png 558w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/09102737\/Screen-Shot-2017-11-09-at-10.27.13-360x199.png 360w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/09102737\/Screen-Shot-2017-11-09-at-10.27.13-232x128.png 232w\" sizes=\"auto, (max-width: 558px) 100vw, 558px\" \/><\/p>\n<p>In the above dashboard, similarity of visualization colors enables you to quickly group related data, see trends and draw comparisons. The 1st row covers overall growth metrics, the second row presents product information and the 3rd row displays regional sales trends.<\/p>\n<p>The smart use of colors enables you to tell a story about overall business performance, helps viewers analyze product growth and compare regional sales<\/p>\n<p>On the other hand, if you use similar colors to visualize unrelated data, then people will look for a relation that doesn\u2019t actually exist. Let\u2019s look at the dashboard below.<\/p>\n<p>&nbsp;<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-13904 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/09102902\/Screen-Shot-2017-11-09-at-10.28.10.png\" alt=\"\" width=\"555\" height=\"361\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/09102902\/Screen-Shot-2017-11-09-at-10.28.10.png 555w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/09102902\/Screen-Shot-2017-11-09-at-10.28.10-360x234.png 360w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/09102902\/Screen-Shot-2017-11-09-at-10.28.10-197x128.png 197w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><\/p>\n<p>The similar colors might make viewers think that they represent the same entities all the charts. For example, since blue color represents Americas in three of the charts, people may think it\u2019s true for all 4 charts on the dashboard. However, if you look carefully, in the fourth chart, blue color actually stands for \u2018Quarterly Growth\u2019<\/p>\n<h3>4. Highlight notable insights<\/h3>\n<p>Every visualization can be analyzed in a number of ways. To ensure that your audience gets your story, it\u2019s important to highlight key findings\/insights that support your narrative.<\/p>\n<p>For example, let\u2019s look at the chart below:<br \/>\n<iframe title=\"Highcharts bar chart. Social media monthly sales trend\" style=\"width: 100%; height: 470px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/some-monthly-sales-trend\" allow=\"fullscreen\"><\/iframe><\/p>\n<p>Although the above chart talks about the positive impact of social media marketing on your revenue, there will be many who focus on why your revenues dropped in May-Jun. Some might even look at the periodic trend in revenues and wonder it\u2019s happening.<\/p>\n<p>To focus your audience\u2019s attention, the key is to highlight the essential parts of your visualization such that they support your story. Here\u2019s the same chart presented in a different way.<\/p>\n<p><iframe title=\"Highcharts bar chart. Social media average monthly sales trend\" style=\"width: 100%; height: 470px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/some-average-monthly-sales-trend\" allow=\"fullscreen\"><\/iframe><\/p>\n<p>Now, when people look at the chart they will be attracted towards the the three orange columns to the right. When they read the chart title and annotation, and look at the highlighted columns, they\u2019ll immediately get the story. As an added bonus, the horizontal line displays average monthly sales, which helps the reader understand that the last three months are performing well, comparatively speaking.<\/p>\n<h3>5. Provide context<\/h3>\n<p>Data visualization is incomplete unless you present it in the right context. You\u2019ll hardly come across charts &amp; tables in isolation. They\u2019re always a part of a larger story &#8211; delivered as a blog post, business report, dashboard, word document or a presentation. So it\u2019s important to use these text-based mediums to build an informative context around your visualizations, to ensure that your audience correctly perceives and comprehends the information you aim to convey through your visualizations.<\/p>\n<p>Here are some ways to add more context to your visualizations:<\/p>\n<ol>\n<li>Use descriptive titles ( as shown in point #2). Use subtitles if your visualizations need more explanation.<\/li>\n<li>If your document has multiple visualizations, add 2-3 lines of introduction before every graphic. If there is only one visualization, then a single explanatory paragraph is sufficient.<\/li>\n<li>Source credible data and mention them as footnotes. Data storytelling is effective only when it is transparent and based on solid, non-biased data.<\/li>\n<\/ol>\n<h3>Wrapping it up<\/h3>\n<p>By blending narratives and visuals, you can effectively target both sides of the human brain &#8211; analytical and emotional. The narrative will present the data in the right context and guide your audience in the right direction. The visualizations will support your story and allow users to visually process information, thereby making it easier to remember and recall it later. Such data storytelling will enable your audience to connect the dots and make better decisions, faster.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you know that narrative and data visualization is a powerful combination to create an effective storytelling? Learn more in this article.<\/p>\n","protected":false},"author":219,"featured_media":13909,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1104],"tags":[1063],"coauthors":[728],"class_list":["post-13898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-best-practices","tag-data-visualization"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/13898","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\/219"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=13898"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/13898\/revisions"}],"predecessor-version":[{"id":29111,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/13898\/revisions\/29111"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/13909"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=13898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=13898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=13898"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=13898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}