Google Charts X Axis Showing Up Down Values

Question

I have plotted a Google Line chart which is showing X axis values in alternating up down format when having more values as shown below.

But I want to show it in a single line in a much better representation than the current one, a slope representation would also be fine like below.

My code for plotting the chart is as below:

var options = {
        width: '100%',
        height: '100%',
        legend: ({ position: 'top', maxLines: 1, alignment: 'end'}),
        chartArea: { left: "8%", right: "8%", top: "10%", width: "100%", height: "75%" },
        backgroundColor: 'transparent',            
        tooltip: { textStyle: { color: 'black' }, isHtml: true },
        curveType: 'none',
    };

var chart = new google.visualization.LineChart($('Div')[0]);
chart.draw(view, options);

Is there any specific option that I have to apply to make the axis display in the required format?

Answer 1

see the configuration options for hAxis

for a slope representation, use --> slantedText: true

hAxis.slantedText - If true, draw the horizontal axis text at an angle, to help fit more text along the axis.

to enforce one level of labels, use --> maxAlternation: 1

hAxis.maxAlternation - Maximum number of levels of horizontal axis text. If axis text labels become too crowded, the server might shift neighboring labels up or down in order to fit labels closer together.

to keep the labels from wrapping on two lines, use --> maxTextLines: 1

maxTextLines - Maximum number of lines allowed for the text labels. Labels can span multiple lines if they are too long, and the number of lines is, by default, limited by the height of the available space.

note: you may need to adjust chartArea.bottom to allow more room along the x-axis...

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var dateFormat = 'dd MMM';
  var formatDate = new google.visualization.DateFormat({
    pattern: dateFormat
  });

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'X');
  dataTable.addColumn('number', 'Value');

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2018, 9, 1);
  var endDate = new Date(2018, 9, 31);
  var ticksAxisH = [];
  for (var i = startDate.getTime(); i <= endDate.getTime(); i = i + oneDay) {
    var rowDate = new Date(i);
    var xValue = formatDate.formatValue(rowDate);
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);
    dataTable.addRow([
      xValue,
      yValue
    ]);
  }

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

  var options = {
    width: '100%',
    height: '100%',
    legend: {
      position: 'top',
      maxLines: 1,
      alignment: 'end'
    },
    chartArea: {
      bottom: 40,
      left: '8%',
      right: '8%',
      top: '10%',
      width: '100%',
      height: '75%'
    },
    backgroundColor: 'transparent',
    tooltip: {
      textStyle: {
        color: 'black'
      },
      isHtml: true
    },
    curveType: 'none',
    hAxis: {
      slantedText: true
    }
  };

  function drawChart() {
    chart.draw(dataTable, options);
  }

  drawChart();
  window.addEventListener('resize', drawChart, false);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>