Make colorful Polar line chart with Highcharts

Highcharts is a charting library written in pure JavaScript to build interactive charts for website or web application.
It support variety of charts like line, area, column, bar, pie, box plot, polar chart types etc. Some of the charts also have drill down capabilities to show hierarchical structures.

In pellustro we also use highcharts to visualize data in form of interactive charts. In our application we used polar line chart like the one shown below. Chart looks pretty in the application but when chart is exported or a screenshots is taken it does not appear that pretty when added to a report (PDF or PPT).

Basic polar line chart

Adding colors to each of the sections like Jan – Feb, Feb – Mar etc. enhances the look of charts appearance.

In this blog I will guide you on how to make these sections colorful.
There are two solutions for adding colors to this type of chart –

  • By creating a new series of pie chart.
  • By rendering colorful arcs on chart.

both of these can help you to create a colorful chart.

Lets take a deeper look on how these two solutions work –

    1. Creating a new series of pie chart.

      Less recommended

      We can add a new series data for pie chart in chart options, by this there will be two combined charts (line + pie). (see image below)

      Here is my fiddle code for polar line chart with pie chart colors.

      This option is good when we are drawing a single layer charts, benefits and limitations of this option are explained below.

      • Benefits
        1. Easy to create, you will only need to add an extra chart data for pie.
        2. Default highcharts colors are applied automatically. (unless you want to edit them)
      • Drawbacks / Limitations
        1. It will not be useful in case of drill down.
          Once you drill down to a point chart will re draw data w.r.t your selection this way you will loose colors.
        2. No opacity to see grid lines of Y-Axis. (You will need to add custom colors in pie series data)


  1. Rendering colorful arcs.


    For this option to work we will need to add some javascript code that can render colors to our chart sections in form of arcs. (see image below)
    Rendered colorful arc polar line chart
    Here is my fiddle code for polar line chart with colorful rendered arcs.

    Lets take a look on its benefits & limitations too.

    • Benifits
      1. Supports colors on chart load, drill down and drill up.
      2. No need to add / build extra data.
    • Drawbacks
      1. Recreating colorful arcs on load / drill down / drill up.This needs some extra code also shared above fiddle link. 🙂

So for overall solution of drawing colors on our polar line charts individual sections i use and recommend Rendering colorful arcs.

Feel free to use an option that suits better to you.

Leave a comment