{"id":5857,"date":"2018-05-02T08:37:38","date_gmt":"2018-05-02T08:37:38","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=5857"},"modified":"2018-12-27T05:51:52","modified_gmt":"2018-12-27T05:51:52","slug":"half-polar-chart-javascript-challenge-anychart","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2018\/05\/02\/half-polar-chart-javascript-challenge-anychart\/","title":{"rendered":"Creating Half Polar Chart with JavaScript \u2014 Challenge AnyChart!"},"content":{"rendered":"

\"Half
\nChallenges are always fun, and we at AnyChart adore taking them up from our customers. AnyChart Support Team<\/a> is happy to show how flexible AnyChart JS Charts<\/a> are. Today\u2019s Challenge AnyChart<\/a> tutorial is about JS polar charts<\/a>. Spend about 5 minutes and you\u2019ll find out how to draw a beautiful polar chart, but display only its one half, making it a half polar chart.<\/p>\n

<\/p>\n

Data Visualization Task<\/h2>\n

The question a customer wanted us to answer:<\/p>\n

Is it possible to show just a half of a Polar Chart in AnyChart JS Charts?
\n<\/strong><\/em><\/p><\/blockquote>\n

To explain what he is willing to see on his chart, the customer sent us a link to the following picture:<\/p>\n

\"Half<\/p>\n

To solve this task, we need some knowledge of the API methods of Polar chart class<\/a> to move a polar chart to the left and draw colored lines on it.<\/p>\n

Solution Overview<\/h2>\n

To begin with, we set a container and draw a polar chart<\/a> inside it. Next, we simply move a half of the chart beyond the container boundaries and change the chart appearance.<\/p>\n

Displaying Half Polar Chart<\/h2>\n

To deal with the main task, we create a function where we use the chart.left()<\/a> method. In this case, the chart is moved to the left by the width of the container (to hide a half of the chart) plus 30 (to make the axis labels look better).<\/p>\n

function relocateChart(chart) {\r\n  chart.left(-chart.container().getBounds().width+30);\r\n}\r\n<\/code><\/pre>\n
The function is executed before we initiate chart drawing and every time when the container is resized, so our chart stays in place.<\/p>\n
chart.listen('chartDraw', function(){\r\n  relocateChart(chart);\r\n});\r\n<\/code><\/pre>\n
That\u2019s it! The Half Polar Chart<\/a> is ready to be presented!<\/p>\n