CODEWITHSUNDEEP
javascriptpythonchartsgoogle-visualizationpygooglechart
Ehrendil
Ehrendil

Reputation: 253

Adding title on vertical axis google charts

I have the following code to make a line chart using google charts:

google.charts.load('current', {'packages':['line']});
  google.charts.setOnLoadCallback(drawChart);

var stream = {{ stream }}
var maximum = {{ maximum }}
var minimum = {{ minimum }}
var unit = {{ unitlabel }}

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Timestamp');
  data.addColumn('number', 'Actual value');

  data.addRows(stream);

  var options = {
  width: 1500,
  height: 500,
  isStacked: false,
  title: "kWh",
   axes: {
        title: "kWh",
        y: {
            title: "kWh",
            all: {
                title: "kWh",
                format: { pattern: 'decimal'},
                range: {
                    max: maximum,
                    min: minimum
                }
            }
        }
    },
    };

  var chart = new google.charts.Line(document.getElementById('curve_chart'));

  chart.draw(data, options);
}

I'm trying to label my y axis as kWh so people know what the unit is. As you can see I've added title: "kWh" in several places, yet none of them yield the desired result. What else can I try?

Thanks.

Upvotes: 1

Views: 1246

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

use following option... 

vAxis: {
  title: 'kWh'
}

see following working snippet... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var sales = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  var dates = ['01/03/2017', '02/03/2017', '03/03/2017', '04/03/2017', '05/03/2017', '06/03/2017', '07/03/2017', '08/03/2017', '09/03/2017', '10/03/2017', '11/03/2017', '12/03/2017', '13/03/2017', '14/03/2017', '15/03/2017', '16/03/2017', '17/03/2017', '18/03/2017', '19/03/2017', '20/03/2017', '21/03/2017', '22/03/2017', '23/03/2017', '24/03/2017', '25/03/2017', '26/03/2017', '27/03/2017', '28/03/2017', '29/03/2017', '30/03/2017', '31/03/2017'];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y');

  for (var i = 0; i < dates.length; i++) {
    data.addRow([dates[i], sales[i]]);
  }

  var options = {
    title: 'Chart Title',
    curveType: 'function',
    legend: {
      position: 'bottom'
    },
    vAxis: {
      title: 'kWh'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>

EDIT

to set the title in Material charts,

first name the axis, then set the label option for the named axis

see following working snippet, here i use kWh for both the name and the label... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['line']
});

function drawChart() {
  var sales = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  var dates = ['01/03/2017', '02/03/2017', '03/03/2017', '04/03/2017', '05/03/2017', '06/03/2017', '07/03/2017', '08/03/2017', '09/03/2017', '10/03/2017', '11/03/2017', '12/03/2017', '13/03/2017', '14/03/2017', '15/03/2017', '16/03/2017', '17/03/2017', '18/03/2017', '19/03/2017', '20/03/2017', '21/03/2017', '22/03/2017', '23/03/2017', '24/03/2017', '25/03/2017', '26/03/2017', '27/03/2017', '28/03/2017', '29/03/2017', '30/03/2017', '31/03/2017'];

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y');

  for (var i = 0; i < dates.length; i++) {
    data.addRow([dates[i], sales[i]]);
  }

  var options = {
    chart: {
      title: 'Chart Title'
    },
    legend: {
      position: 'bottom'
    },
    series: {
      0: {axis: 'kWh'}
    },
    axes: {
      y: {
        kWh: {label: 'kWh'}
      }
    }
  };

  var chart = new google.charts.Line(document.getElementById('curve_chart'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>

Upvotes: 1

Related Questions