Generating 3D pie chart using JSON - Javascript highcharts

Javascript examples for highcharts:Pie Chart

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

Description

Generating 3D pie chart using JSON

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>highcharts</title> 
   </head> 
   <body translate="no"> 
      <div id="chart1"></div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-3d.js"></script> 
      <script>
      $(document).ready(function() {
  var options = {//from   ww w.  j  av a  2 s. co m
    chart: {
      renderTo: "chart1",
      type: "pie",
      options3d: {
        enabled: true,
        alpha: 45,
        beta: 0,
        depth: 50,
        viewDistance: 25
      }
    },
    title: {
      text: ""
    },
    subtitle: {
      text: ""
    },
    xAxis: {
      categories: []
    },
    yAxis: {
      enabled: false,
      title: {
        text: "Amount"
      },
      labels: {},
      plotLines: [
        {
          value: 0,
          width: 1,
          color: "#808080"
        }
      ]
    },
    tooltip: {
      formatter: function() {
        return (
          "<b>" +
          this.series.name +
          "</b><br/>" +
          this.x +
          ": $" +
          Highcharts.numberFormat(this.y, 0, "", ",")
        );
      }
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    series: []
  };
  options.series = [
    {
      name: "test",
      data: ["Asset", "Total Lending", "Total Deposits", "Brokered Deposits"]
    },
    {
      name: "First Republic Bank",
      label: "test",
      data: [48353330, 38079817, 37130929, 1957317]
    },
    {
      name: "Cathay Bank",
      data: [11488897, 8902674, 8814629, 497369]
    }
  ];
  options.plotOptions = {
    pie: {
      depth: 25
    },
    dataLabels: {
      enabled: true,
      format: "<b>{name}</b>"
    }
  };
  chart = new Highcharts.Chart(options);
});
    
      </script>  
   </body>
</html>

Related Tutorials