Chartjs-Long text in x-axis is cut in bar graphs ng2-charts

by

0👍

Having faced this issue in my project, I realized ng2-charts doesn’t provide you anyway that you can display long ticks. So I had to move to google-charts.

NPM documentation for ng2-google-charts

If you are having a hard time configuring refer this article – Using Google Charts in Angular 4 project

If it’s not scroll-able in mobile view, use css such as

<div class="google-chart-row">
  <pie-chart [data]="question.googleChartData" [elementId]="question.questionId"></pie-chart>
</div>

.google-chart-row{
  display: block;
  width: 100 %;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

Leave a comment