Spiderweb

author(s): Torstein Hønsi

by Geo George

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>

</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
  min-width: 320px;
  max-width: 700px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #EBEBEB;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}


span.title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 5px;
    display: block;
    float: left;
    clear: both;
}
span.description {
    font-size: 13px;
    display: block;
    width: 100%;
    float: left;
}

JavaScript

var chartcategories=[
	" A properous Africa based on inclusive growth and sustainable development",
  "An integrated continent, politically united and based on the ideals of Pan - Africanism and a Vision of the African Renaissance",
  " An African of good governance, democracy, respect for human rights and the rule of law",
  "A peaceful and secure Africa",
  "African with a strong cultural identity, common heritage, value and beliefs",
  "An Africa whose development of people driven, relying on the potential of the African People",
  "Africa as a strong and influential global partner"


]



Highcharts.chart('container', {

  chart: {
    polar: true,
    type: 'area',
    height: 500,
    marginTop:100,
    //paddingLeft:0,
    //marginRight:50,
    //marginBottom:50
    //paddingTop:150
    
  },
  credits: {
    enabled: false
  },
  accessibility: {
    description: ''
  },
	colors:["#53243b"],
  title: {
    enabled: false,
    text: null,
   // x: -80
  },

  pane: {
    size: '80%'
  },

  xAxis: {
    categories: chartcategories,
    tickmarkPlacement: 'on',
    lineWidth: 0,
    gridLineColor:'#ddd3d8',
    labels:{
    		distance:"45",
        useHTML:true,
    		style:{
        	fontSize:"10px"        
          /* color:"red" */
        },
    	formatter:function(){
    	        var template="<span class='title'>Aspiration "+
              									(this.pos+1) +
              							"</span><span class='description'>"+chartcategories[this.pos]+"</span>";
              	
    	               //if(this.name){
    	          /* var values=this.value;     
    	          var labels=values.split(':'); 
    	          var template=labels[0]; */
    	          return template;
    	        //}
    	
    	      } 
    }
  },

  yAxis: {
    gridLineInterpolation: 'polygon',
    lineWidth: 0,
    min: 0,
    gridLineColor:'#ddd3d8'
  },

  tooltip: {
    //shared: true,
    pointFormat: '<span style="color:{series.color}">{series.name}:...