Search code examples
chartsgoogle-visualization

Removing months from google visualisation line chart

My x-axis for google visualisation chart is javascript new Date(year+i, 0, 0). However when I print the line chart. It shows M J S at the bottom with the year number.

How can I remove these M J S (which I presume are May June and September).

enter image description here

Solution

  • the following snippet re-produces the problem, with year number combined with month abbreviations... 

    2020 M J S 2021 M J S etc...


    google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Mutual Fund');

  for (var y = 2020; y < 2024; y++) {
    for (var m = 0; m < 12; m++) {
      data.addRow([new Date(y, m, 1), (10000 + y + m)]);
    }
  }

  var container = document.getElementById('chart');
  var chart = new google.visualization.LineChart(container);

  chart.draw(data);
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

    to only show year, you can use hAxis option format. 

    hAxis: {
  format: 'yyyy'
}

    however, this could cause the year to repeat (depending on the width of the chart)... 

    2020 2020 2020 2020 2021 2021 2021

    see following snippet... 

    google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Mutual Fund');

  for (var y = 2020; y < 2024; y++) {
    for (var m = 0; m < 12; m++) {
      data.addRow([new Date(y, m, 1), (10000 + y + m)]);
    }
  }

  var container = document.getElementById('chart');
  var chart = new google.visualization.LineChart(container);

  chart.draw(data, {
    hAxis: {
      format: 'yyyy'
    }
  });
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

    to ensure the year doesn't repeat, we must also provide hAxis option ticks.
    ticks must be in the same format as the data on the x-axis, in this case a date.
    so we provide the jan date for each year... 

    hAxis: {
  format: 'yyyy',
  ticks: [new Date(2020, 0, 1), new Date(2021, 0, 1), new Date(2022, 0, 1)]
}

    you should be able to create the ticks dynamically, from the data.
    see following snippet for an example... 

    google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Mutual Fund');

  var ticks = [];
  for (var y = 2020; y < 2024; y++) {
    for (var m = 0; m < 12; m++) {
      data.addRow([new Date(y, m, 1), (10000 + y + m)]);
      if (m === 0) {
        ticks.push(new Date(y, m, 1));
      }
    }
  }

  var container = document.getElementById('chart');
  var chart = new google.visualization.LineChart(container);

  chart.draw(data, {
    hAxis: {
      format: 'yyyy',
      ticks: ticks
    }
  });
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>