Highcharts: Line with drill down & colors.

Line (polar chart) with drill down capability & custom rendered colors.

HTML

<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script> 
<script src="//code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="width: 500px; height: 500px; margin: 0 auto"></div>

JavaScript

var colors = Highcharts.getOptions().colors.slice(0), dark = -0.1;
colors[0] = Highcharts.Color("#cc0001").brighten(dark).get();
colors[1] = Highcharts.Color("#1f6f1f").brighten(dark).get();
colors[2] = Highcharts.Color("#264cc9").brighten(dark).get();
colors[3] = Highcharts.Color("#cd39a5").brighten(dark).get();
colors[4] = Highcharts.Color("#be9262").brighten(dark).get();
colors[5] = Highcharts.Color("#ffa200").brighten(dark).get();
colors[6] = Highcharts.Color("#6500cc").brighten(dark).get();
colors[7] = Highcharts.Color("#993300").brighten(dark).get();
colors[8] = Highcharts.Color("#04abec").brighten(dark).get();
colors[9] = Highcharts.Color("#ff4c1f").brighten(dark).get();
colors[10] = Highcharts.Color("#32cd32").brighten(dark).get();

Highcharts.setOptions({
    colors: Highcharts.map(colors, function(color) {
      return {
        linearGradient: {
          x1: 1,
          y1: 0,
          x2: 1,
          y2: 1,
          children: [{
                tagName: 'stop',
                offset: 0
            }, {
                tagName: 'stop',
                offset: 1
            }]
        },
        stops: [
          [0, color],
          [1, Highcharts.Color(color).brighten(-0.4).get('rgb')] // darken
        ]
      };
    })
  });
Highcharts.chart('container', {
    chart: {
        polar: true,
        type: 'area'
    },
  	exporting: {
    	buttons: {
      	contextButton: {
        	menuItems:[
             'printChart',
             'separator',
             'downloadPNG',
             'downloadJPEG',
             'downloadCSV',
          ]
        }
      }
    },
    title: {
        text: 'GMA News Online<br/>Articles per Section',
    },
    subtitle: {
    	text: 'from May 1 to May 31, 2018'
    },
    pane: {
        size: '80%'
    },
    xAxis: {
        categories: ['News', 'Money', 'Sports', 'Pinoy Abroad', 'Scitech', 'Showbiz', 'Lifestyle', 'Opinion', 'Hashtag', 'Serbisyo Publiko', 'CBB'],
        lineWidth: 0
    },
    defs: {
  ...