Blog

Google Charts – Histogram Chart Colors

Following is an example of a histogram chart with custom colors. We’ve already seen the configuration used to draw this chart in the Google Charts Configuration Syntax chapter. So, let’s see the complete example.

Configurations

We’ve used color configuration to change the default color of the histogram chart.

// Set chart options
var options = {colors: ['green']};

Example

googlecharts_histogram_color.htm

<html>
   <head>
      <title>Google Charts </title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {
            // Define the chart to be drawn.
             var data = google.visualization.arrayToDataTable([
               ['Student Roll No', 'height'],
               ['1', 80],['2', 55],['3', 68],['4', 80],['5', 54],
               ['6', 70],['7', 85],['8', 78],['9', 70],['10', 58],
               ['11', 90],['12', 65],['13', 88],['14', 82],['15', 65],
               ['16', 86],['17', 45],['18', 62],['19', 84],['20', 75],
               ['21', 82],['22', 75],['23', 58],['24', 70],['25', 85]               
            ]);
              
            // Set chart options
            var options = {
               title: 'Students height, in cm',
               legend: { position: 'none' },
               colors: ['green']
            };                           
 
            // Instantiate and draw the chart.
            var chart = new google.visualization.Histogram(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>
   </body>
</html>

Result

Verify the result.

This Post Has 2 Comments

Leave a Reply