plotBackgroundColor on spider chart - Javascript highcharts

Javascript examples for highcharts:Chart Color

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Color

Description

plotBackgroundColor on spider chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {/*w  w w.  ja  v  a2 s. co  m*/
   width: 500px;
}


      </style> 
   </head> 
   <body> 
      <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> 
      <div id="container"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  colors: ['#f78200', '#90ee7e'],
  chart: {
    polar: true,
    type: 'column'
  },
  credits: {
    enabled: false
  },
  title: {
    text: 'Current equity exposure',
    x: -80
  },
  pane: {
    size: '80%',
    plotBackgroundColor: '#3d4d5d'
  },
  xAxis: {
    categories: ['UK', 'North America', 'Japan', 'Europe ex-UK', 'Pacific ex-Japan', 'Emerging markets', 'Global'],
    tickmarkPlacement: 'on',
    lineWidth: 0,
    gridLineColor: '#263542',
  },
  yAxis: {
    gridLineInterpolation: 'polygon',
    lineWidth: 0,
    min: 0,
    max: 25,
    labels: {
      enabled: false,
      formatter: function() {
        return this.value + '%';
      }
    },
    gridLineColor: '#263542',
  },
  tooltip: {
    shared: true,
    pointFormat: '<span style="color:{series.color}"><strong>{point.y:.2f}%</strong><br/>'
  },
  legend: {
    align: 'right',
    verticalAlign: 'top',
    y: 70,
    layout: 'vertical',
    enabled: false
  },
  series: [{
    type: 'area',
    color: '#3d4d5d',
    animation: false,
    showInLegend: false,
    enableMouseTracking: false,
    marker: {
      enabled: false
    },
    data: [30, 30, 30, 30, 30, 30, 30]
  }, {
    name: 'Exposure',
    pointPlacement: 'on',
    fillColor: 'rgba(247, 130, 0, 0.2)',
    data: [22.2, 10.4, 3.8, 5.6, 2.2, 4.7, 7.1]
  }]
});

      </script>  
   </body>
</html>

Related Tutorials