CODEWITHSUNDEEP
javascriptamcharts4
Tony Montana
Tony Montana

Reputation: 1018

Amchart 4 not showing bar graph when there is very long label

I am using Amchart 4 to visualize the bar graph. I am using this official example from the amchart.

Now, the problem I am facing is that amchart doesn't render the bar graphs when there is a very long label. It is not handling it properly. It looks like this.

enter image description here

This is my js code:

/**
 * --------------------------------------------------------
 * This demo was created using amCharts V4 preview release.
 * 
 * V4 is the latest installement in amCharts data viz
 * library family, to be released in the first half of
 * 2018.
 *
 * For more information and documentation visit:
 * https://www.amcharts.com/docs/v4/
 * --------------------------------------------------------
 */

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "category": "First very long category label, very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long",
  "value": 450
}, {
  "category": "Another long category label",
  "value": 1200
}];

// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

// Configure axis label
var label = categoryAxis.renderer.labels.template;
label.wrap = true;
label.maxWidth = 120;

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";

Now, I just don't want to truncate the label, like this official document. But I would like to have some kind of solution such as truncating labels only if it goes out of some maxHeight property. So that way, I can still show full labels which doesn't go out of the maxHeight property.

For the live example: JSFIDDLE

Upvotes: 0

Views: 1146

Answers (1)

Menawer
Menawer

Reputation: 883

If you want you can this code after initiating your array Im just going through the categories, and checking for the length, i think the length that breaks the Chart is somewhere around 80-85, its based the context but you can have a minimum safe number maybe 80

chart.data.map(el => {
  if(el.category.length > 80){
    el.category=`${el.category.substr(0,40)}...`;
  }
})

and modify the numbers based on what suits you.

Upvotes: 1

Related Questions