Style legend with div - Javascript highcharts

Javascript examples for highcharts:Chart Legend

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

Description

Style legend with div

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Chart Base</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script> 
      <script type="text/javascript">
    $(function(){//from  www  . j a  v  a  2 s .c  o  m
$('#container').highcharts({
chart: {
    margin:[40,25,75,25],
    backgroundColor: 'transparent',
    plotBorderColor: '#ccc',
    plotBorderWidth: 2,
    type: 'bar'
},
title: {
    text: null
},
credits: {
    enabled: false
},
yAxis: {
    title: {
        text: null
    },
    labels: {
        enabled: false
    },
    tickLength: 0,
    lineColor: 0,
    lineWidth: 0,
    gridLineWidth: 0
},
xAxis: {
    min:0,
    max:0,
    maxPadding:0,
    minPadding:0,
    title: {
        text: null
    },
    labels: {
        enabled: false
    },
    tickLength: 0,
    lineColor: 0,
    lineWidth: 0
},
plotOptions: {
    bar: {
        stacking: 'percent',
        groupPadding:0,
        pointPadding:0,
        pointRange:1,
    }
},
legend: {
    // reversed: true,
    symbolHeight: 0,
    symbolWidth: 0,
    //floating: true,
    useHTML: true,
    itemDistance: 10,
    y: -10,
    labelFormatter:
        function() {
            if (this.name === "HIDDEN")
            {
                return '';
            }
            return '<div class="insp360-widgetLegendItemContainer">' +
                    '<div class="insp360-widgetLegendNumber" style="background-color: ' + this.color + '">' + this.yData[0] + '</div>' +
                    '<div class="insp360-widgetLegendName">' + this.name + '</div>' +
                '</div>';
        }
},
series: [
    {
        name: 'New Business',
        data: [10],
        color: '#ADD8E6'
    },
    {
        name: 'Re-Underwriting',
        data: [20],
        color: '#FFBC57'
    },
    {
        name: 'Consultative Visit',
        data: [30],
        color: '#FF5200'
    },
    {
        name: 'Recommendation Check',
        data: [40],
        color: '#B084FF '
    },
    {
        name: 'Other',
        data: [50],
        color: '#27AC4C'
    }
]
});
    });

      </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="height:150px;margin:1.5em 1em;"></div>  
   </body>
</html>

Related Tutorials