Add borders for legend in google visualization core chart - Javascript Google Chart

Javascript examples for Google Chart:Legend

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

Description

Add borders for legend in google visualization core chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
      <div id="ex5"></div> 
      <script type="text/javascript">
google.load('visualization', '1', {
    packages: ['corechart']
});/* www  . j  a  v  a  2  s.  c o  m*/
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.arrayToDataTable([
        ['Status', 'Completed', 'In Progress', 'Registered / Not Started', 'Past Due', {
            role: 'annotation'
        }],
        ['Safety', 100.0, 0.0, 0.0, 0.0, 'Hello'],
        ['Conduct ', 100.0, 0.0, 0.0, 0.0, 'Hello'],
        ['Policy', 100.0, 0.0, 0.0, 0.0, 'Hello'],
        ['Privacy', 100.0, 0.0, 0.0, 0.0, 'Hello'],
        ['Violence', 100.0, 0.0, 0.0, 0.0, 'Hello'],
        ['Integrity', 0.0, 0.0, 100.0, 0.0, 'Hello']
    ]);
    var options = {
        height: 500,
        width: 800,
        chartArea: {
            left: 100,
            top: 100,
            right: 0,
            bottom: 0
        },
        hAxis: {
            ticks: [25, 50, 75, 100]
        },
        isStacked: true,
        bar: {
            groupWidth: '20'
        },
        vAxis: {
            textStyle: {
                color: '#000000',
                fontSize: '12',
                paddingRight: '0',
                marginRight: '0'
            }
        },
        colors: ['green', '#ffff99', '#ffbf0c', 'red'],
        legend: {
            position: 'right',
            alignment: 'end'
        },
        annotations: {
            alwaysOutside: true,
            highContrast: true,
            textStyle: {
                fontSize: 17,
                auraColor: 'none',
                color: '#000'
            }
        },
    };
    var chart = new google.visualization.BarChart(
        document.getElementById('ex5'));
    chart.draw(data, options);
    var legend = document.querySelector('#ex5')
                         .querySelector('g')
                         .querySelector('rect');
    legend.setAttribute('y', parseInt(legend.getAttribute('y'))-6);
    legend.setAttribute('height', parseInt(legend.getAttribute('height'))+12);
    legend.setAttribute('style', "fill:#ebebeb;stroke:black;stroke-width:1;fill-opacity:1;stroke-opacity:1;");
    var legendTitles = document.querySelector('#ex5')
                         .querySelector('g')
                         .children;
    for (var i=1;i<legendTitles.length;i++) {
        var rects = legendTitles[i].querySelectorAll('rect');
        rects[1].setAttribute('x', parseInt(rects[1].getAttribute('x'))+3);
    }
}

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

Related Tutorials