{"id":23078,"date":"2023-02-07T10:24:54","date_gmt":"2023-02-07T10:24:54","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=23078"},"modified":"2026-01-13T11:26:54","modified_gmt":"2026-01-13T11:26:54","slug":"line-chart","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/line-chart\/","title":{"rendered":"How to create a fancy line chart"},"content":{"rendered":"<p>A line chart, also known as a line graph, is an effective chart for visualizing data over time. It is one of the most commonly used chart types in data analysis and visualization, for many good reasons, such as being easy to create, understand, highlight trends, etc.<br \/>\nAnother good reason to use a line chart is that it is beneficial for individuals with cognitive impairment, as it is cognitive friendly.<br \/>\nLet me explain, the following chart displays the top 10 largest economies by average values of GDP:<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 450px; border: none;\" title=\"A line chart displays the top 10 largest economies by average values of GDP\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/line-chart\"><\/iframe><\/p>\n<p>This demo could be easily created using a bar race chart. Bar race charts are popular on social media thanks to their wow factor. However, line charts are better if only communicating the data is the primary goal, which is not always the case. The line chart above is easily understood because there is no timer to run the chart like the bar race chart, the stress dimension due to the timer is removed. Everyone can go at his\/her pace to get insight from a line chart by comparing the dataset and examining the trends. In other words, the line chart is cognitively friendly despite the significant amount of data.<\/p>\n<p>Now, let\u2019s see how to create such a chart.<\/p>\n<p>To create such a chart, I went through the following steps:<\/p>\n<ol>\n<li>Reverse yAxis to get the country order from number one (on top) to the last one(at the bottom). To do that, I set  <code>reversed<\/code> to  <code>true<\/code>\n<pre>  yAxis: {\r\n    reversed: true,\r\n    gridLineWidth: 0,\r\n    tickInterval: 1,\r\n    startOnTick: false<\/pre>\n<\/li>\n<li>Set up the option <code>opposite<\/code> to <code>true<\/code> on the xAxis\n<pre>  xAxis: {\r\n    opposite: true,\r\n    offset: 10<\/pre>\n<\/li>\n<li>Align the legend next to each line on the right side using the legend\u2019s option <code>layout<\/code>:\n<pre>  legend: {\r\n    align: \"right\",\r\n    verticalAlign: \"middle\",\r\n    layout: \"proximate\",\r\n    itemStyle: {\r\n      color: \"#FFFFFF\",\r\n      fontWeight: \"bold\"\r\n    }\r\n  }<\/pre>\n<\/li>\n<\/ol>\n<p>In summary, line charts are a simple and effective way to visualize data over time. They are easy to understand and cognitively friendly. It is not surprising that line charts are widely used in data analysis, business and management, economics, and other fields.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create a fancy cognitive-friendly line chart using Highcharts<\/p>\n","protected":false},"author":32,"featured_media":23094,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094,1031],"coauthors":[699],"class_list":["post-23078","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/23078","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=23078"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/23078\/revisions"}],"predecessor-version":[{"id":24078,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/23078\/revisions\/24078"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/23094"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=23078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=23078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=23078"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=23078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}