Show Legend name and color need in the export - Javascript highcharts

Javascript examples for highcharts:Chart Legend

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

Description

Show Legend name and color need in the export

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </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> 
      <script src="https://code.highcharts.com/modules/export-data.js"></script> 
      <div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
  chart: {//from   w  w w.ja  v a2  s. co  m
    type: 'boxplot'
  },
  legend: {
    enabled: true
  },
  exporting: {
    chartOptions: {
      legend: {
        allowHTML: true,
        enabled: true,
        margin: 25,
        itemMarginTop: 0,
        symbolRadius: 0,
        symbolHeight: 20,
        symbolWidth: 20,
        useHTML: true,
        align: 'right',
        verticalAlign: 'bottom'
      }
    }
  },
  title: {
    text: 'Highcharts Box Plot Example'
  },
  legend: {
    enabled: false
  },
  xAxis: {
    categories: ['1', '2', '3', '4', '5'],
    title: {
      text: 'Experiment No.'
    }
  },
  yAxis: {
    title: {
      text: 'Observations'
    },
    plotLines: [{
      value: 932,
      color: 'red',
      width: 1,
      label: {
        text: 'Theoretical mean: 932',
        align: 'center',
        style: {
          color: 'gray'
        }
      }
    }]
  },
  series: [{
    name: 'Observations1',
    data: [
      { color:"#5D63D3",
       high:1381733.354653,
       low:1375002.43018757,
       median:1378397.06388383,
       name:"Captive Options",
       q1:1377657.3051449,
       q3:1379137.30789384
      }],
    tooltip: {
      headerFormat: '<em>Experiment No {point.key}</em><br/>'
    }
  },{
    name: 'Observations2',
    color:"#FFB81C",
    data: [{
      high:31571.3633337259,
      low:25798.8488509699,
      median:28811.9158552374,
      name:"Self Insurance Option",
      q1:28152.937211967,
      q3:29440.3428303377,
    }],
    tooltip: {
      headerFormat: '<em>Experiment No {point.key}</em><br/>'
    }
  }]
});

      </script>  
   </body>
</html>

Related Tutorials