Is it possible to add borders for legend in google visualization core chart?

Question

Is it possible to add borders for legend in google visualization core chart?

Here is the code http://jsfiddle.net/mchx2nLe/1/

google.load('visualization', '1', {
    packages: ['corechart']
});
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: 500,
        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'
        },
        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);
}

Would like to move the legend at the bottom right with a border around it? Is it possible?

Answer 1

To see how it works online try this: https://codepen.io/ejsado/pen/HLgzK

CSS:

#bar-chart::before, #line-chart::before {
content: "";
position: absolute;
display: block;
width: 240px;
height: 30px;
left: 155px;
top: 254px;
background: #FAFAFA;
box-shadow: 10px 10px 0px 0px #DDD;
}

JS:

var lineOptions = {
legend: {
  position: 'bottom',
  textStyle: {
    fontSize: 12
  }
 },
};

HTML:

<h5>Traffic Over Time</h5>
<div id="line-chart"></div>

Answer 2

As for the legend to be moved bottom-right, simply :

legend: {
    position: 'right',
    alignment: 'end'
}

As for the wish to have a border around the legend, no - there is no builtin feature for borders around the legend in BarCharts. However, if you really want, you can manipulate the <svg> <g> <rect> element directly. Find the <rect> element for the legend :

var legend = document.querySelector('#ex5')
                     .querySelector('g')
                     .querySelector('rect');

style it as you want :

legend.setAttribute('style', "fill:blue;stroke:pink;stroke-width:5;fill-
opacity:0.1;stroke-opacity:0.9");

Bear in mind that this is not adviceable as a long-term steady solution. In this example we are lucky that the <g> <rect> element was easy to find, but no matter what, we cannot be sure how google is rendering the graph in a month or in a year. But do it if you really, really want :)

forked fiddle with both features -> http://jsfiddle.net/u0Ly9uj6/

---

Update. To beautify the legend, i.e "add some spacing between the text and the border" as @Learner2011 asks, I think the easiest way is to decrease y of the legend, increase the height of the legend, and move the colored square a little bit to the right. The reason is that paddings and margins are ignored by <rect>'s.

//increase legend height and decrese legend top
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;");

//move the colored squares a little to the right    
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);
}

The result looks like this :

fiddle -> http://jsfiddle.net/0kLbq4sq/