Google Charts - Google Charts tutorial - Basic Line Chart with Customizable line color - chart js - google graphs - google charts examples

Basic line chart is based on the area chart and the line between axis and area is filled with colors to indicate volume
Basic Line charts are used for drawing line and spline based charts which are done in Basic Line Charts.
Basic Line charts are used to compare changes over time between two groups
Basic Line Chart have system changes when the measure shows a complete shift to a different level
Basic Line Chart have variations in both the normal range in which data is expected to fluctuate over time and outlying data points that merit investigating the data points.

Basic Line Chart with Customizable line color

Configuration

Here the code which is given below shows us the configuration for basic line chart with customizable line color and we have added colors configuration to change the default line colors.

Sample Code:

// Set chart options
var options = {
   colors: ['#a52714', '#0000ff', '#ff0000', '#00ff00']
};

Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

The program which is given below shows us the full program of basic line chart with customizable line color which is used.

Example

 Tryit<html>
<head>
<title>Wikitechy Google Charts Tutorial</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart','line']});  
   </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 = new google.visualization.DataTable();
   data.addColumn('string', 'Month');
   data.addColumn('number', 'Tokyo');
   data.addColumn('number', 'New York');
   data.addColumn('number', 'Berlin');
   data.addColumn('number', 'London');
   data.addRows([
      ['Jan',  7.0, -0.2, -0.9, 3.9],
      ['Feb',  6.9, 0.8, 0.6, 4.2],
      ['Mar',  9.5,  5.7, 3.5, 5.7],
      ['Apr',  14.5, 11.3, 8.4, 8.5],
      ['May',  18.2, 17.0, 13.5, 11.9],
      ['Jun',  21.5, 22.0, 17.0, 15.2],
      ['Jul',  25.2, 24.8, 18.6, 17.0],
      ['Aug',  26.5, 24.1, 17.9, 16.6],
      ['Sep',  23.3, 20.1, 14.3, 14.2],
      ['Oct',  18.3, 14.1, 9.0, 10.3],
      ['Nov',  13.9,  8.6, 3.9, 6.6],
      ['Dec',  9.6,  2.5,  1.0, 4.8]
   ]);
   
   // Set chart options
   var options = {'title' : 'Average Temperatures of Cities',
      hAxis: {
         title: 'Month'
      },
      vAxis: {
         title: 'Temperature'
      },   
      'width':550,
      'height':400,
      colors: ['#a52714', '#0000ff', '#ff0000', '#00ff00']
   };

   // Instantiate and draw the chart.
   var chart = new google.visualization.LineChart(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

Google Charts - Google Charts tutorial - Basic Line Chart with Customizable line color - chart js - google graphs - google charts examples

What is Basic Line Chart?

Basic Line Chart with Customizable line color

Configuration

Sample Code:

Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Example

Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output:

Related Searches to Google Charts - Basic Line Chart with Customizable line color

Wikitechy

Workshop

Join our Community

Other Languages