Polar / Spider chart with off-graph y-axis labels - Javascript highcharts

Javascript examples for highcharts:Chart Label

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

Description

Polar / Spider chart with off-graph y-axis labels

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </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" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
var xOffset = -200;// w w w . j a v  a2 s  . c  o m
Highcharts.chart('container', {
  chart: {
    polar: true,
    type: 'line',
    events: {
      render: function() {
        var yAxis = this.yAxis[0],
           renderer = this.renderer,
          label = yAxis.ticks[0].label;
          renderer.path(['M', label.xy.x, label.xy.y, 'l', label.xy.x - xOffset - 30, 0]).attr({
             stroke: 'black',
            'stroke-width': 1
          }).add();
      }
    }
  },
  title: {
    text: "# of Impacts",
    x: -80
  },
  pane: {
    size: '80%',
    startAngle: 0,
  },
  xAxis: {
    categories: ['Back', 'Left', 'Front', 'Top',
      'Right'
    ],
    tickmarkPlacement: 'on',
    lineWidth: 0
  },
  yAxis: {
    gridLineInterpolation: 'polygon',
    lineWidth: 0,
    min: 0,
    offset: 0,
    labels: {
      align: 'left',
      x: xOffset,
      y: 0
    },
    tickLength: 500
  },
  /*     tooltip: {
          shared: true,
          pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
      }, */
  legend: {
    align: 'right',
    verticalAlign: 'top',
    y: 70,
    layout: 'vertical'
  },
  series: [{
    type: 'area',
    name: 'Low Impact',
    data: [43000, 19000, 60000, 35000, 17000],
    pointPlacement: 'off'
  }, {
    type: 'area',
    name: 'Actual Spending',
    data: [50000, 39000, 42000, 31000, 26000],
    pointPlacement: 'off'
  }]
});

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

Related Tutorials