format legend names - Javascript highcharts

Javascript examples for highcharts:Chart Legend

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

Description

format legend names

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Highcharts Sample</title> 
   </head> 
   <body translate="no"> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script src="https://code.highcharts.com/modules/export-data.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> 
      <script>
      Highcharts.setOptions({//from   w ww .jav  a 2  s . c  om
  colors: [
    "#50B432",
    "#ED561B",
    "#DDDF00",
    "#24CBE5",
    "#64E572",
    "#FF9655",
    "#FFF263",
    "#6AF9C4"
  ]
});
// Build the chart
Highcharts.chart("container", {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: "pie"
  },
  title: {
    text: ""
  },
  tooltip: {
    formatter: function() {
      return "<b>" + this.point.status + "</b>: " + this.percentage + " %";
    }
  },
  legend: {
      labelFormat: '{status}'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: "pointer",
      dataLabels: {
        enabled: false
      },
      showInLegend: true
    }
  },
  series: [
    {
      name: "Status",
      data: [
        { status: "Running", y: 80 },
        { status: "Idle", y: 16 },
        { status: "Not connected", y: 4 }
      ]
    }
  ],
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  }
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials