{"id":5021,"date":"2016-04-19T18:54:57","date_gmt":"2016-04-19T16:54:57","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=5021"},"modified":"2026-01-08T08:54:08","modified_gmt":"2026-01-08T08:54:08","slug":"209-the-art-of-the-chart-weather-radials","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/209-the-art-of-the-chart-weather-radials\/","title":{"rendered":"The Art of the Chart: Weather Radials"},"content":{"rendered":"<p dir=\"ltr\">I\u00a0was surfing by the deep seas of the web when I found Brice Pierre de la Briere\u2019s <a href=\"http:\/\/bl.ocks.org\/bricedev\" target=\"_blank\" rel=\"noopener\">blocks<\/a> and I saw his beautiful weather radials, originally a\u00a0<a href=\"http:\/\/weather-radials.com\/\" target=\"_blank\" rel=\"noopener\">poster collection<\/a>.<\/p>\n<p dir=\"ltr\">If you have used Highcharts before, you might be thinking to yourself: \u201cI wish I could create something like this, but I don\u2019t remember seeing radial plots like these as a chart option.\u201d<\/p>\n<p dir=\"ltr\">Well, then it may be time to play around with your chart configuration! Are you ready?<\/p>\n<h3 dir=\"ltr\">STEP1<\/h3>\n<p dir=\"ltr\">For this project we&#8217;ll use the daily temperature from San Francisco in 2004 as our data. As a\u00a0first step we&#8217;ll check the data integrity and chart it in the most simple way: A timeline<\/p>\n<p><iframe title=\"Highcharts weather radial timeline\" style=\"width: 100%; height: 680px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/weather-radial-timeline\" allow=\"fullscreen\"><\/iframe><br \/>\nEverything seems right. The seasonal variations in temperatures are easy to read, but not exactly something you\u2019d frame as a work of art.<\/p>\n<h3 dir=\"ltr\">STEP 2<\/h3>\n<p dir=\"ltr\">Next we transform our timeline chart in a column range chart. This chart type allows us to display the range between the\u00a0minimum and maximum temperatures.<\/p>\n<p><iframe title=\"Highcharts column range\" style=\"width: 100%; height: 680px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/weather-radial-column-range\" allow=\"fullscreen\"><\/iframe><\/p>\n<h3 dir=\"ltr\">STEP 3<\/h3>\n<p dir=\"ltr\">Next, we\u2019ll add a color to the range according the daily mean temperatures. The final touch will be the most important and simple step. Change the coordinate to polar. Cross our fingers and see the result&#8230;<\/p>\n<p><iframe title=\"Highcharts polar\" style=\"width: 100%; height: 680px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/weather-radial-polar\" allow=\"fullscreen\"><\/iframe><\/p>\n<p dir=\"ltr\">Look: A very artistic, beautiful chart. Now, <em>that<\/em> you can frame!<\/p>\n<p dir=\"ltr\">As we see Highcharts is really flexible and allows chart the data in various, and sometimes unexpected, ways.<\/p>\n<p>Do you have any examples of using Highcharts to create works of art? Share below!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Explore unusual ways to use radial plots to visualize data in uniquely informative and beautiful ways.<\/p>\n","protected":false},"author":42,"featured_media":10590,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094,793],"coauthors":[714],"class_list":["post-5021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core","tag-r"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/5021","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\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=5021"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/5021\/revisions"}],"predecessor-version":[{"id":29041,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/5021\/revisions\/29041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/10590"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=5021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=5021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=5021"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=5021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}