Repeating hAxis labels when slanting text - Google Charts

Question

We are using Google Charts within an MVC project.

We have managed to get the chart implemented however we are having a slight issue.

Whenever we slant the text 90 degrees the hAxis labels are repeating (see below).

We would like the text to be slanted at 90 degree but only have the label appear once on the hAxis (see below).

Things we've tried (that had no effect on the chart):

Setting the hAxis grid lines :

 hAxis: {
           slantedText: true,
           slantedTextAngle: 90,
           gridlines: {count: 7}
        },

Setting the hAxis minor grid lines:

hAxis: {
          slantedText: true,
          slantedTextAngle: 90,
          minorGridlines: { count: 5 }
       },

Is there a way we can achieve the desired result for the hAxis labels?

Answer 1

when using a continuous axis,
provide your own ticks to ensure no repeats...

ticks takes an array of values of the same data type as the axis

each tick can be a raw value, such as a date --> new Date(2017, 3, 2)

or you can use object notation,
to provide both the value (v:) and the formatted value (f:)

{v: new Date(2017, 3, 2), f: '2017'}

these can be built dynamically, using data table method --> getColumnRange
which returns an object with the min & max values for the column

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      [{type: 'date'}, {type: 'number'}, {type: 'number'}],
      [new Date(2008, 2, 5), 10, 2],
      [new Date(2008, 6, 6), 25, 4],
      [new Date(2008, 10, 8), 30, 6],
      [new Date(2009, 3, 2), 50, 7],
      [new Date(2009, 8, 12), 60, 8],
      [new Date(2009, 11, 20), 62, 9],
      [new Date(2010, 2, 5), 64, 10],
      [new Date(2010, 6, 6), 70, 10],
      [new Date(2010, 10, 8), 71, 10],
      [new Date(2011, 3, 2), 100, 12],
      [new Date(2012, 8, 12), 125, 12],
      [new Date(2012, 11, 20), 160, 12],
      [new Date(2013, 10, 8), 71, 10],
      [new Date(2014, 3, 2), 100, 12],
      [new Date(2015, 8, 12), 125, 12],
      [new Date(2016, 9, 20), 160, 12],
      [new Date(2016, 10, 8), 71, 10],
      [new Date(2017, 3, 2), 100, 12],
      [new Date(2017, 5, 12), 125, 12],
      [new Date(2017, 6, 20), 160, 12]
    ]);

    var dateRange = data.getColumnRange(0);
    var oneYear = (1000 * 60 * 60 * 24 * 365.25);
    var ticksAxisH = [];
    for (var i = dateRange.min.getTime(); i <= dateRange.max.getTime(); i = i + oneYear) {
      var tick = new Date(i);
      ticksAxisH.push({
        v: tick,
        f: tick.getFullYear().toString()
      });
    }

    var options = {
      hAxis: {
        ticks: ticksAxisH
      },
      legend: 'none'
    };

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(data, options);
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart"></div>

---

EDIT

the ticks option is only supported by a continuous axis (date, number, etc...)
and is unavailable for a discrete axis (string)

use a data view to convert the first column to a number...

// convert first column to number
var view = new google.visualization.DataView(data);
view.setColumns([{
  calc: function (dt, row) {
    return parseInt(dt.getValue(row, 0));
  },
  label: data.getColumnLabel(0),
  type: 'number'
}, 1, 2]);

then use data table / view method --> getDistinctValues(colIndex)
this will return an array of the distinct values in the column,
which can be used for the ticks

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"type": "string" ,"id": "Data" ,"label": "Label" },
        {"type": "number" ,"id": "Performance" ,"label": "Performance" },
        {"type": "number" ,"id": "Index" ,"label": "Index" }
      ],
      "rows": [
        {"c" : [{"v": "2008"}, {"v": 0}, {"v": "0"}]},
        {"c" : [{"v": "2008"}, {"v": 0.07103609}, {"v": "0.0052939"}]},
        {"c" : [{"v": "2008"}, {"v": 0.12668605420031}, {"v": "0.0152939"}]},
        {"c" : [{"v": "2009"}, {"v": 0.27103609}, {"v": "0.0252939"}]},
        {"c" : [{"v": "2009"}, {"v": 0.32668605420031}, {"v": "0.0352939"}]},
        {"c" : [{"v": "2010"}, {"v": 0.37103609}, {"v": "0.0452939"}]},
        {"c" : [{"v": "2010"}, {"v": 0.42668605420031}, {"v": "0.0552939"}]},
        {"c" : [{"v": "2011"}, {"v": 0.47103609}, {"v": "0.0652939"}]},
        {"c" : [{"v": "2011"}, {"v": 0.52668605420031}, {"v": "0.0752939"}]},
        {"c" : [{"v": "2012"}, {"v": 0.57103609}, {"v": "0.0852939"}]},
        {"c" : [{"v": "2012"}, {"v": 0.62668605420031}, {"v": "0.0952939"}]},
        {"c" : [{"v": "2013"}, {"v": 0.67103609}, {"v": "0.1052939"}]},
        {"c" : [{"v": "2013"}, {"v": 0.72668605420031}, {"v": "0.2152939"}]}
      ]
    });

    // convert first column to number
    var view = new google.visualization.DataView(data);
    view.setColumns([{
      calc: function (dt, row) {
        return parseInt(dt.getValue(row, 0));
      },
      label: data.getColumnLabel(0),
      type: 'number'
    }, 1, 2]);

    var options = {
      hAxis: {
        format: '0',
        ticks: view.getDistinctValues(0)
      },
      legend: 'none'
    };

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(view, options);  // <-- use view to draw chart
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart"></div>

---

EDIT 2

another option would be to leave the axis as discrete (string),
and simply remove the duplicate labels from the data

this can also be accomplished using a data view...

// remove duplicates from first column
var view = new google.visualization.DataView(data);
view.setColumns([{
  calc: function (dt, row) {
    var xValue = dt.getValue(row, 0);
    if ((row > 0) && (xValue === dt.getValue(row - 1, 0))) {
      return null;
    } else {
      return xValue;
    }
  },
  label: data.getColumnLabel(0),
  type: 'string'
}, 1, 2]);

see following working snippet...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable({
      "cols": [
        {"type": "string" ,"id": "Data" ,"label": "Label" },
        {"type": "number" ,"id": "Performance" ,"label": "Performance" },
        {"type": "number" ,"id": "Index" ,"label": "Index" }
      ],
      "rows": [
        {"c" : [{"v": "2008"}, {"v": 0}, {"v": "0"}]},
        {"c" : [{"v": "2008"}, {"v": 0.07103609}, {"v": "0.0052939"}]},
        {"c" : [{"v": "2008"}, {"v": 0.12668605420031}, {"v": "0.0152939"}]},
        {"c" : [{"v": "2009"}, {"v": 0.27103609}, {"v": "0.0252939"}]},
        {"c" : [{"v": "2009"}, {"v": 0.32668605420031}, {"v": "0.0352939"}]},
        {"c" : [{"v": "2010"}, {"v": 0.37103609}, {"v": "0.0452939"}]},
        {"c" : [{"v": "2010"}, {"v": 0.42668605420031}, {"v": "0.0552939"}]},
        {"c" : [{"v": "2011"}, {"v": 0.47103609}, {"v": "0.0652939"}]},
        {"c" : [{"v": "2011"}, {"v": 0.52668605420031}, {"v": "0.0752939"}]},
        {"c" : [{"v": "2012"}, {"v": 0.57103609}, {"v": "0.0852939"}]},
        {"c" : [{"v": "2012"}, {"v": 0.62668605420031}, {"v": "0.0952939"}]},
        {"c" : [{"v": "2013"}, {"v": 0.67103609}, {"v": "0.1052939"}]},
        {"c" : [{"v": "2013"}, {"v": 0.72668605420031}, {"v": "0.2152939"}]}
      ]
    });

    // remove duplicates from first column
    var view = new google.visualization.DataView(data);
    view.setColumns([{
      calc: function (dt, row) {
        var xValue = dt.getValue(row, 0);
        if ((row > 0) && (xValue === dt.getValue(row - 1, 0))) {
          return null;
        } else {
          return xValue;
        }
      },
      label: data.getColumnLabel(0),
      type: 'string'
    }, 1, 2]);

    var options = {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 12,
        left: 24,
        bottom: 48,
        right: 4
      },
      hAxis: {
        maxAlternation: 1
      },
      height: '100%',
      legend: 'none',
      width: '100%'
    };

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(view, options);
    $(window).resize(function() {
      chart.draw(view, options);
    });
  },
  packages:['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart"></div>

Answer 2

VICTORY!

So I finally got it working. WhiteHat you're an absolute genius! Thank you! EDIT 2 did the trick, however I added an extra property to the hAxis for it to display all labels (see below).

showTextEvery:1

Below is the full implementation for anyone else having this issue.

var data = new google.visualization.DataTable(@Html.Raw(Json.Encode(perfData)));

                                var view = new google.visualization.DataView(data);
                                view.setColumns([{
                                    calc: function (dt, row) {
                                        var xValue = dt.getValue(row, 0);
                                        if ((row > 0) && (xValue === dt.getValue(row-1, 0))) {
                                            return null;
                                        } else {
                                            return xValue;
                                        }
                                    },
                                    label: data.getColumnLabel(0),
                                    type: 'string'
                                }, 1, 2]);

                                var options = {
                                    chartArea : { left: 40, top:10},
                                    width:450,
                                    height: 300,

                                    hAxis: {
                                        slantedText: true,
                                        slantedTextAngle: 90,
                                        showTextEvery:1
                                    },

                                    legend:{position:'bottom'},
                                    vAxis: {
                                        format: '#%',
                                        gridlines: {count: 7}
                                    }
                                };
                                var chart_div = document.getElementById('returnsChart');
                                var chart = new google.visualization.LineChart(chart_div);

                                chart.draw(view, options);
                                $(window).resize(function () {
                                    chart.draw(view, options);
                                });

below is the final image: