2 problems in axis format date Google charts

Question

I'm trying to format the date on the axis like this: May '18. My formatting looks like this: 'MMM \' yy'. I have 2 problems: 1. What should I do to make the first letter of the month capitalized? Do I need to generate ticks to achieve this? 2. There is a problem with an apostrophe, i.e. when it applies it after it, formatting is no longer used, and the apostrophe itself is not shown. For example, the above looks like this: may yy. I also tried to use apostrophe characters from ASCII and Unicode, but this does not work. Just Google Charts probably treats an apostrophe as a character that can not be used ... Is there any advice?

EDIT:

Problem solved with apostrophe. \u2019 is not exactly an apostrophe. The correct apostrophe is: https://unicode-table.com/en/0027/, but it looks good anyway.

However, in my case, the first letter of the month is still small because I use Polish translation. Is there any advice for this?

EDIT:

Problem solved.

Answer 1

you can use unicode as such --> \u2019

hAxis: {
  format: 'MMM \u2019yy'
}

see following working snippet...

google.charts.load('current', {
  packages: ['controls', 'corechart', 'table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [new Date(2018, 4, 1), 1],
    [new Date(2018, 5, 2), 2],
    [new Date(2018, 6, 3), 3],
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, {
    hAxis: {
      format: 'MMM \u2019yy'
    }
  });
});

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

EDIT

to capitalize the first letter when using a language code,
use the ticks option instead of format
then manually change the first letter toUpperCase...

  ticks: data.getDistinctValues(0).map(function (date) {
    var value = formatDate.formatValue(date);
    value = value.substring(0, 1).toUpperCase() + value.substr(1);
    return {
      v: date,
      f: value
    };
  })

see following working snippet...

google.charts.load('current', {
  packages: ['corechart'],
  language: 'pl'
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [new Date(2018, 4, 1), 1],
    [new Date(2018, 5, 2), 2],
    [new Date(2018, 6, 3), 3],
  ]);

  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM \u2019yy'
  });

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, {
    hAxis: {
      ticks: data.getDistinctValues(0).map(function (date) {
        var value = formatDate.formatValue(date);
        value = value.substring(0, 1).toUpperCase() + value.substr(1);
        return {
          v: date,
          f: value
        };
      })
    }
  });
});

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