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.

user_5090771 · Answer

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;
}

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;
}

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

1 Answers