pie chart: get series color in tooltip header Format - Javascript highcharts

Javascript examples for highcharts:Chart Tooltip

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

Description

pie chart: get series color in tooltip header Format

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Pie Problem</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*w ww .j  a v  a  2s  .  c o  m*/
      $(function () {
          $(document).ready(function () {
              // Build the chart
              $('#container').highcharts({
                  chart: {
                      plotBackgroundColor: null,
                      plotBorderWidth: null,
                      plotShadow: false,
                      type: 'pie'
                  },
                  title: {
                      text: 'Browser market shares January, 2015 to May, 2015'
                  },
                   tooltip: {
                       borderWidth: 0,
                       //backgroundColor: "#EBEBEB",
                       headerFormat: '<span style="background:{point.point.color}; color:white;">{point.color}{point.key}</span><br/><br/>',
                       pointFormat: '<span>{point.color}{point.percentage:.2f}%</span>({point.y:.2f})<br/>',
                       useHTML: true,
                       style: {
                           padding: 10
                       }
                   },
                  plotOptions: {
                      pie: {
                          allowPointSelect: true,
                          cursor: 'pointer',
                          dataLabels: {
                              enabled: false
                          },
                          showInLegend: true
                      }
                  },
                  series: [{
                      name: "Brands",
                      colorByPoint: true,
                      data: [{
                          name: "Microsoft Internet Explorer",
                          y: 56.33,
                          color: 'red'
                      }, {
                          name: "Chrome",
                          y: 24.030000000000005,
                          sliced: true,
                          selected: true,
                          color: 'green'
                      }, {
                          name: "Firefox",
                          y: 10.38,
                          color: 'blue'
                      }, {
                          name: "Safari",
                          y: 4.77,
                          color: 'yellow'
                      }, {
                          name: "Opera",
                          y: 0.9100000000000001,
                          color: 'pink'
                      }, {
                          name: "Proprietary or Undetectable",
                          y: 0.2,
                          color: 'black'
                      }]
                  }]
              });
          });
      });
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.src.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials