CODEWITHSUNDEEP
amcharts
blarg
blarg

Reputation: 3893

How to programmatically set gridcount in Amcharts 4

I have a xychart with labels on the y axis. Every second label is being hidden:

enter image description here

Google suggests that I can set:

valueAxis.autoGridCount = false;

and:

valueAxis.gridCount

to the number of grids required by the data.

...but it doesn't have any effect, autoGridCount seems to be missing in the V4 documentation and there is no mention of it being removed.

How can I programmatically set gridcount?

EDIT: JSFiddle here

Upvotes: 1

Views: 930

Answers (1)

Samuel Philipp
Samuel Philipp

Reputation: 11050

As you already figured out you can use axis.renderer.minGridDistance to show all labels:

categoryAxis.renderer.minGridDistance = 0;

To adjust the row height you can use series.columns.template.height to adjust the height of each element. I would suggest to set it to 100% and set a small border to the items:

series.columns.template.stroke = am4core.color('#fff');
series.columns.template.strokeWidth = 1;
series.columns.template.strokeOpacity = 1;
series.columns.template.height = am4core.percent(100);

To adjust the row height I would recommend increasing the chart height in general, because amcharts is trying to display all data in the area you provide. So increasing the height of the chart will cause all rows to have equal height and fill the provided area.

If you have varying data and don't know the number of rows, you can set the height of the chart dynamically according to the length of your data array and use an html scrollbar:

JavaScript:

document.getElementById('chart').style.height = `${chart.data.length * 50}px`;

HTML:

<div class="container">
  <div id="chartdiv"></div>
</div>

CSS:

.container {
  max-height: 300px;
  overflow-y: auto;
}

#chartdiv {
  min-height: 200px;
}

Here I created a code pen to show my suggestion.

Upvotes: 0

Related Questions