Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Year', 'Sales', 'Expenses'],
            ['2004',  1000,      400],
            ['2005',  1170,      460],
            ['2006',  660,       1120],
            ['2007',  1030,      540]
        ]);
​
        var options = {
            title: 'Company Performance',
            vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}},
            isStacked: true
        };
​
        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
​
        var labels = document.querySelectorAll('text[text-anchor=end]');
        console.log(labels);
       
        for (var i = 0; i < labels.length; i++) {
            if (labels[i].textContent == '2004') {
                labels[i].setAttribute('font-weight', 'bold');
                labels[i].setAttribute('font-size', '20');
            }
            if (labels[i].textContent == '2005') {
                labels[i].setAttribute('font-style', 'italic');
                labels[i].setAttribute('font-size', '20');
            }
        }
        // font-style: italics  normal
        // font-weight: bold
    }
</script>
</head>
<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
antojurkovicpro
0viewers