chart export: export rendered arc colors - Javascript highcharts

Javascript examples for highcharts:Chart Color

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

Description

chart export: export rendered arc colors

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts render arc</title> 
      <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 () {//from www  .j  a  v a2s  . c  o  m
    var chart = new Highcharts.Chart({
       chart: {
           polar: true,
            renderTo: 'container',
            events:{
            load:function(){
            var chart = this,
                  parts = 8,
                  colors = ["#058DC7", "#50B432", "#ED561B", "#DDDF00", "#24CBE5", "#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1", "#696969", "#64E572", "#FF9655", "#FFF263", "#6AF9C4"];
    for(var i = 0; i < parts; i++) {
        chart.renderer.arc(chart.plotLeft + chart.yAxis[0].center[0],
                           chart.plotTop + chart.yAxis[0].center[1],
                           chart.yAxis[0].height,
                           0,
                           -Math.PI + (Math.PI/(parts/2) * i),
                           -Math.PI + (Math.PI/(parts/2) * (i+1))).attr({
            fill: colors[i % colors.length],
            'stroke-width': 1,
            'opacity': 1
        }).add();
    }
            }
            }
       },
       title: {
           text: 'Highcharts Polar Chart'
       },
       pane: {
           startAngle: 0,
           endAngle: 360
       },
       xAxis: {
           tickInterval: 45,
           min: 0,
           max: 360,
           labels: {
              formatter: function () {
                 return this.value + '?';
              }
           }
       },
       yAxis: {
           min: 0,
          tickInterval: 2,
          showLastLabel: true
       },
       plotOptions: {
           series: {
               pointStart: 0,
               pointInterval: 45
           },
           column: {
               pointPadding: 0,
               groupPadding: 0
           },
          line: {
                pointPlacement: "between",
              dataLabels: {
                  allowOverlap: true,
                  enabled: true
              }
          }
       },
       series: [{
           type: 'line',
           name: 'Line',
           data: [1, 2, 3, 4, 5, 6, 7, 8]
       }]
   });
});

      </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