polar display custom label name or icons in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

polar display custom label name or icons in column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {/*  www  .  j av a 2s .  co  m*/
  var data = [{
    name: '<img src="http://highcharts.com/demo/gfx/sun.png" alt="" style="vertical-align: middle; width: 32px; height: 32px"/> Label 1',
    y: 4,
    color: "#9fe642"
  }, {
    name: '<img src="http://highcharts.com/demo/gfx/sun.png" alt="" style="vertical-align: middle; width: 32px; height: 32px"/> Label 2',
    y: 1,
    color: "#274ffb"
  }, {
    name: '<img src="http://highcharts.com/demo/gfx/snow.png" alt="" style="vertical-align: middle; width: 32px; height: 32px"/> Label 3',
    y: 6,
    color: "#705ba4"
  }, {
    name: '<img src="http://highcharts.com/demo/gfx/snow.png" alt="" style="vertical-align: middle; width: 32px; height: 32px"/> Label 4',
    y: 2,
    color: "#a54593"
  }];
  var chart = new Highcharts.Chart({
    chart: {
      polar: true,
      renderTo: 'container',
      type: 'column'
    },
    title: {
      text: ''
    },
    pane: {
      startAngle: 0,
      endAngle: 360
    },
    xAxis: {
      tickInterval: 360,
      min: 0,
      max: 360,
      labels: {
        enabled: false
      },
      lineColor: 'transparent',
      gridLineColor: 'transparent'
    },
    yAxis: {
      min: 0,
      gridLineColor: 'transparent',
      labels: {
        enabled: false
      }
    },
    plotOptions: {
      series: {
        pointStart: 0,
        pointInterval: 90,
        dataLabels: {
          useHTML: true,
          enabled: true,
          format: '<span class="wheel-label" style="color: {point.color}">{point.name}</span>',
          style: {
            textShadow: false,
            width: 150,
            fontSize: "16px"
          }
        }
      },
      column: {
        pointPadding: 0,
        groupPadding: 0,
        events: {
          legendItemClick: function() {
            return false;
          }
        },
        borderWidth: 2
      }
    },
    //legend: {},
    credits: {
      enabled: false
    },
    series: [{
      data: data,
      legendType: 'point'
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <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="width: 500px; height: 500px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials