CODEWITHSUNDEEP
javascripttypescriptchartsgoogle-visualization
Jeterson Miranda Gomes
Jeterson Miranda Gomes

Reputation: 5483

Show all labels in hAxis google chart bar

I am learning how use the Google Charts API, to be more specific Material cloumn charts. I want to show all labels in hAxis, for example (1,2,3,4,5 [...]), but my chart shows them in the format (5,10,15, [...]). I have tried the suggestions from this question, but without success.

This is my chart currently: this

And this is my code:

desenharGrafico(data: Array<any>) {

var rows: Array<any> = [];

for (var item of data) {
  var rua = item.rua;
  var valor = item.valor;
  var valorCortado = item.valorCortado;
  var objeto = { c: [{ v: rua }, { v: valor }, { v: valorCortado }] };
  rows.push(objeto);
}

var chartData = new google.visualization.DataTable({
  cols: [
    { id: '', label: 'Rua', type: 'number' },
    { id: '', label: 'Faturado', type: 'number' },
    { id: '', label: 'Corte', type: 'number' }
  ],
  rows: rows
});

var options =
  {
    title: "Período: " + this.data1 + ' á ' + this.data2,
    hAxis: { slantedText: true, showTextEvery: 1 },
    legend: "none",

  };
var chart = new google.charts.Bar(document.getElementById('cortes-rua'));
chart.draw(chartData, google.charts.Bar.convertOptions(options));
}

Upvotes: 1

Views: 2380

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

there are many options that are simply not supported by Material charts,
including slantedText & showTextEvery
see --> Tracking Issue for Material Chart Feature Parity

an alternative solution is to use 'string' values for the x-axis

this will result in a Discrete axis, vs. Continuous

with enough room, a Discrete axis will display all labels...

Upvotes: 2

Related Questions