{"id":17617,"date":"2024-09-09T07:34:04","date_gmt":"2024-09-09T07:34:04","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=17617"},"modified":"2025-10-08T17:05:02","modified_gmt":"2025-10-08T17:05:02","slug":"pie-chart-with-radial-scale","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2024\/09\/09\/pie-chart-with-radial-scale\/","title":{"rendered":"JavaScript Pie Chart with Radial Scale \u2014 JS Chart Tips"},"content":{"rendered":"

\"JavaScript<\/a>Welcome\u00a0to JS Chart Tips<\/a>, our new blog series where we showcase practical solutions to common and unique challenges our Support Team<\/a> has helped customers overcome. This time, we’re eager to explain how to build a sophisticated circular diagram that may resemble a pie chart with a radial scale. Just a heads-up: this type of visualization is technically a polar column chart.<\/p>\n

<\/p>\n

Question:\u00a0How to Create Pie Chart with Radial Scale?<\/h2>\n

Our Support Team was recently asked about a way to build what was called a\u00a0pie chart<\/a>, described as one\u00a0with equal segments, each filled from the center outward based on the percentage value in that category. The customer\u00a0provided an image\u00a0of the desired visualization\u00a0similar to the one below.<\/p>\n

\"A<\/p>\n

An easy solution\u00a0appeared to be\u00a0readily available in our\u00a0JavaScript charting library<\/a>\u00a0right out of the box.<\/p>\n

Solution: Creating\u00a0Radial Pie Chart as Polar\u00a0Column Chart<\/h2>\n

Overview<\/h3>\n

While a pie chart doesn’t support this kind of visualization, a\u00a0polar\u00a0chart<\/a> with a column series is designed for exactly this purpose.<\/p>\n

To\u00a0create a polar column (bar) chart<\/a>, the core of the approach lies in using the anychart.polar()<\/code> chart constructor and calling the column()<\/code> method. Join us as we demonstrate this data visualization technique.<\/p>\n

In Detail<\/h3>\n

First, create a polar chart instance:<\/p>\n

var chart = anychart.polar();<\/code><\/pre>\n
Second, add your data<\/a>, which might look something like this:<\/p>\n
var data = [\r\n  { x: \"January\", value: 80 },\r\n  { x: \"February\", value: 54 },\r\n  { x: \"March\", value: 30 },\r\n  { x: \"April\", value: 70 },\r\n  { x: \"May\", value: 48 },\r\n  { x: \"June\", value: 35 },\r\n  { x: \"July\", value: 77 },\r\n  { x: \"August\", value: 60 },\r\n  { x: \"September\", value: 35 },\r\n  { x: \"October\", value: 90 },\r\n  { x: \"November\", value: 37 },\r\n  { x: \"December\", value: 45 }\r\n];<\/code><\/pre>\n
Third, create a column series in this chart with this data:<\/p>\n
var series = chart.column(data);<\/code><\/pre>\n
Fourth, since the data in this case is categorical,\u00a0set the\u00a0ordinal type of the X-scale:<\/p>\n
chart.xScale(\"ordinal\");<\/code><\/pre>\n
Finally, complete with setting the container, commanding to draw the result, and\u00a0wrapping the entire JS chart code\u00a0into the anychart.onDocumentReady()<\/code> function. Here’s how it can look:<\/p>\n
\/\/ when the document is ready, execute the following function\r\nanychart.onDocumentReady(function () {\r\n \r\n  \/\/ create a polar chart\r\n  var chart = anychart.polar();\r\n\r\n  \/\/ create data for the gray series\r\n  var data = [\r\n    { x: \"January\", value: 80 },\r\n    { x: \"February\", value: 54 },\r\n    { x: \"March\", value: 30 },\r\n    { x: \"April\", value: 70 },\r\n    { x: \"May\", value: 48 },\r\n    { x: \"June\", value: 35 },\r\n    { x: \"July\", value: 77 },\r\n    { x: \"August\", value: 60 },\r\n    { x: \"September\", value: 35 },\r\n    { x: \"October\", value: 90 },\r\n    { x: \"November\", value: 37 },\r\n    { x: \"December\", value: 45 }\r\n  ];\r\n \r\n  \/\/ create a column series\r\n  var series = chart.column(data);\r\n\r\n  \/\/ set the type of the x-scale to ordinal\r\n  chart.xScale(\"ordinal\");\r\n\r\n  \/\/ set the container id for the chart\r\n  chart.container(\"container\");\r\n\r\n  \/\/ initiate drawing the chart\r\n  chart.draw();\r\n \r\n});<\/code><\/pre>\n
Examples<\/h3>\n
Check out two examples\u00a0of such a circular diagram and feel free to experiment further with the code and visualizations.<\/p>\n
First, here’s a basic one\u00a0using the code shown above:<\/p>\n
    \n
  • JS Polar Column Chart | AnyChart Playground<\/a><\/li>\n<\/ul>\n
    \"JS<\/a><\/p>\n
    Second, here’s an advanced version similar to the one that we made for\u00a0that\u00a0customer, which additionally features series-based category groupings, customized coloring, and an empty space in the center:<\/p>\n
      \n
    • Advanced JS Polar Column Chart | AnyChart Playground<\/a><\/li>\n<\/ul>\n
      \"Advanced<\/a><\/p>\n
      Further Learning<\/h2>\n
      Learn more about creating a polar column chart in our JavaScript charting docs:<\/p>\n
        \n
      • Column Chart \u2014 Polar Plot \u2014 Basic Charts | AnyChart JS Documentation<\/a><\/li>\n<\/ul>\n
        Wrapping Up<\/h2>\n
        Should you have any questions or require further help, don\u2019t hesitate to comment below or\u00a0get in touch with our\u00a0Support Team<\/a>.<\/p>\n
        Don’t miss future installments of our\u00a0JavaScript Chart Tips<\/a>\u00a0series for more useful\u00a0advice.<\/p>\n
        Wishing you success\u00a0with JavaScript charting!<\/strong><\/p>\n