How can draw tick related style like major tick, tick-length, position, color in react-google-charts

Question

This picture can help to understand my problem. Need an orange tick.

Answer 1

in the data table used to draw the chart,
we can use a hidden series with an annotation role.

data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'hidden series');
data.addColumn({type:'string', role:'annotation'});

we use a value of zero for the hidden series.
this will place the annotation on the x-axis.
and we give the annotation a value, such as 'A' , so the annotation is drawn.

to draw the orange tick , and hide the annotation value,
we use the following annotation options...

annotations: {
  boxStyle: {
    fill: '#f57c00',
    stroke: '#f57c00',
    strokeWidth: 1
  },
  stem: {
    length: 0
  },
  textStyle: {
    color: 'transparent',
    fontSize: 16
  },
},

you can use fontSize to change the size of the annotation.

to prevent the hidden series from being drawn,
we use the following options...

series: {
  1: {
    color: 'transparent',
    visibleInLegend: false,
    enableInteractivity: false
  }
},

see following working snippet...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = new google.visualization.DataTable(); data.addColumn('string', 'x'); data.addColumn('number', 'y'); data.addColumn('number', 'hidden series'); data.addColumn({type:'string', role:'annotation'}); data.addRows([ ['2010-01-01', 10, 0, 'A'], ['2012-01-01', 4, 0, 'A'], ['2014-01-01', 26, 0, 'A'], ['2016-01-01', 50, 0, 'A'], ['2018-01-01', 75, 0, 'A'] ]); var options = { annotations: { boxStyle: { fill: '#f57c00', stroke: '#f57c00', strokeWidth: 1 }, stem: { length: 0 }, textStyle: { color: 'transparent', fontSize: 12 }, }, chartArea: { left: 80, top: 56, right: 32, bottom: 80, height: '100%', width: '100%' }, hAxis: { title: 'Date' }, height: '100%', legend: { position: 'none' }, series: { 1: { color: 'transparent', visibleInLegend: false, enableInteractivity: false } }, title: 'value vs. Date', vAxis: { title: 'value' }, width: '100%' }; var chart = new google.visualization.LineChart(document.getElementById('chart')); window.addEventListener('resize', function () { chart.draw(data, options); }); chart.draw(data, options); });

 html, body { height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } #chart { height: 100%; min-height: 400px; }

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

---

EDIT

another option is to draw square points at each tick location,
as suggested by @dlaliberte

see following working snippet...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = new google.visualization.DataTable(); data.addColumn('string', 'x'); data.addColumn('number', 'y'); data.addColumn('number', 'tick series'); data.addRows([ ['2010-01-01', 10, 0], ['2012-01-01', 4, 0], ['2014-01-01', 26, 0], ['2016-01-01', 50, 0], ['2018-01-01', 75, 0] ]); var options = { chartArea: { left: 80, top: 56, right: 32, bottom: 80, height: '100%', width: '100%' }, hAxis: { title: 'Date' }, height: '100%', legend: { position: 'none' }, series: { 1: { color: '#f57c00', lineWidth: 0, pointSize: 12, pointShape: 'square', visibleInLegend: false, enableInteractivity: false } }, title: 'value vs. Date', vAxis: { title: 'value' }, width: '100%' }; var chart = new google.visualization.LineChart(document.getElementById('chart')); window.addEventListener('resize', function () { chart.draw(data, options); }); chart.draw(data, options); });

 html, body { height: 100%; margin: 0px 0px 0px 0px; overflow: hidden; padding: 0px 0px 0px 0px; } #chart { height: 100%; min-height: 400px; }

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