CODEWITHSUNDEEP
javascriptcsschartsamcharts
Marco Orlando
Marco Orlando

Reputation: 21

How to add space between Columns in amCharts Bar Chart to avoid overlap category

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",
   
    "dataProvider":[{"category":"sourcing\n e prime lavorazioni ","value":-2,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#f68e8c","#f6bebc"],"colorBorder":"#f45854","isImpresaInFaseFiliera":true,"labelClass":"filiera-label"},{"category":"lavorazioni intermedieeeeeeeee ","value":-1,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#f68e8c","#f6bebc"],"colorBorder":"#f45854","isImpresaInFaseFiliera":false},{"category":"lavorazioni finali ","value":2,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#add09d","#cde0cd"],"colorBorder":"#88bc72","isImpresaInFaseFiliera":false},{"category":"distribuzione ","value":1,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#add09d","#cde0cd"],"colorBorder":"#88bc72","isImpresaInFaseFiliera":false},{"category":"valore medio filiera","average":0,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#add09d","#cde0cd"],"colorBorder":"#88bc72","isImpresaInFaseFiliera":false}],
    "valueAxes": [{
        "gridColor":"#FFFFFF",
		"gridAlpha": 0.2,
		"dashLength": 0
    }],
    "gridAboveGraphs": true,
    "startDuration": 1,
    "graphs": [{
        "balloonText": "[[category]]: <b>[[value]]</b>",
        "fillAlphas": 0.8,
        "lineAlpha": 0.2,
        "type": "column",
        "valueField": "value"		
    }],
    "chartCursor": {
        "categoryBalloonEnabled": false,
        "cursorAlpha": 0,
        "zoomable": false
    },
    "categoryField": "category",
    "categoryAxis": {
        "gridPosition": "start",
        "autoWrap": true,
        "gridAlpha": 0,
         "tickPosition":"start",
         "tickLength":20,
         "classNameField": 'labelClass'
    },
	"exportConfig":{
	  "menuTop": 0,
	  "menuItems": [{
      "icon": '/lib/3/images/export.png',
      "format": 'png'	  
      }]  
	}
});
#chartdiv {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}	
.filiera-label tspan {
   font-family: Arial Black;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

I'm using AmChart 3 to make a bar chart and using a different font-family for just a category (Arial Black) so I got the overlay of the category names. How can avoid this?

original image with the problem

I tried css rules like letter-spacing, word-spacing, small size but everything looks like ugly

is there any elegant solution? Thanks

I did a jsFiddle to try, you will see the effect just resizing the window jsfiddle example

jsfiddle screenshot jsfiddle imageScreenshot of the first answer received

Upvotes: 2

Views: 1902

Answers (3)

Marco Orlando
Marco Orlando

Reputation: 21

The solution that I used to solve is add line break each word, and set a minimun size of the chart

  formatCategoryLabelChart(charts) {
    _.each(charts, chart => {
     const categories = chart.compiledChart.categoryAxis.chart.dataProvider;
  _.each(categories, category => { category.category = this.addLineBreak(category.category) });
})
}

 addLineBreak(str) {
  return str.replace('\n', '' ).split(' ').join('\n');
}

Upvotes: 0

xorspark
xorspark

Reputation: 16012

There isn't really a way to add extra spacing outside of alternating between empty data items and your data items. Outside of that, you can try the following:

1) You can set the labelRotation in your categoryAxis to some angle to rotate the labels so that they're less likely to overlap.

2) You can use the responsive plugin and add rules to help tweak your axis labels at various width thresholds. For example, you can change the labelRotation at certain minimum widths so that they're easier to read or outright disable them at smaller widths

  "responsive": {
    "enabled": true,
    "rules": [{
      "minWidth": 600,  //rotate to 45 degrees when width is between 600-800 px
      "maxWidth": 800,
      "overrides": {
        "categoryAxis": {
          "labelRotation": 45
        }
      }
    }, {
      "maxWidth": 599, //rotate to 90 when width is between 350-599px
      "minWidth": 350,
      "overrides": {
        "categoryAxis": {
          "labelRotation": 90
        }
      }
    }, {
      "maxWidth": 349, //disable when too small
      "overrides": {
        "categoryAxis": {
          "labelsEnabled": false,
          "tickLength": 0
        }
      }
    }]
  }

Here's a demo that demonstrates this.

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "none",

  "dataProvider": [{
    "category": "sourcing\n e prime lavorazioni ",
    "value": -2,
    "reminderPositive": 999999999,
    "reminderNegative": -999999999,
    "colorFill": ["#f68e8c", "#f6bebc"],
    "colorBorder": "#f45854",
    "isImpresaInFaseFiliera": true,
    "labelClass": "filiera-label"
  }, {
    "category": "lavorazioni intermedieeeeeeeee ",
    "value": -1,
    "reminderPositive": 999999999,
    "reminderNegative": -999999999,
    "colorFill": ["#f68e8c", "#f6bebc"],
    "colorBorder": "#f45854",
    "isImpresaInFaseFiliera": false
  }, {
    "category": "lavorazioni finali ",
    "value": 2,
    "reminderPositive": 999999999,
    "reminderNegative": -999999999,
    "colorFill": ["#add09d", "#cde0cd"],
    "colorBorder": "#88bc72",
    "isImpresaInFaseFiliera": false
  }, {
    "category": "distribuzione ",
    "value": 1,
    "reminderPositive": 999999999,
    "reminderNegative": -999999999,
    "colorFill": ["#add09d", "#cde0cd"],
    "colorBorder": "#88bc72",
    "isImpresaInFaseFiliera": false
  }, {
    "category": "valore medio filiera",
    "average": 0,
    "reminderPositive": 999999999,
    "reminderNegative": -999999999,
    "colorFill": ["#add09d", "#cde0cd"],
    "colorBorder": "#88bc72",
    "isImpresaInFaseFiliera": false
  }],
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "value"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "category",
  "categoryAxis": {
    "gridPosition": "start",
    "autoWrap": true,
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20,
    "classNameField": 'labelClass'
  },
  "exportConfig": {
    "menuTop": 0,
    "menuItems": [{
      "icon": '/lib/3/images/export.png',
      "format": 'png'
    }]
  },
  "responsive": {
    "enabled": true,
    "rules": [{
      "minWidth": 600,
      "maxWidth": 800,
      "overrides": {
        "categoryAxis": {
          "labelRotation": 45
        }
      }
    }, {
      "maxWidth": 599,
      "minWidth": 350,
      "overrides": {
        "categoryAxis": {
          "labelRotation": 90
        }
      }
    }, {
      "maxWidth": 349,
      "overrides": {
        "categoryAxis": {
          "labelsEnabled": false,
          "tickLength": 0
        }
      }
    }]
  }
});
#chartdiv {
  width: 100%;
  height: 500px;
  font-size: 11px;
}

.filiera-label tspan {
  font-family: Arial Black;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/plugins/responsive/responsive.min.js"></script>
<div id="chartdiv"></div>

Upvotes: 0

Samuel Hulla
Samuel Hulla

Reputation: 7099

Best way to prevent this from happening is to set the overflow: hidden; to prevent overlapping of innerHTML and word-break: break-word; to provide at least some form of resemblence of the words so they don't just break at random points.

Additionally, while not necessary, for visual reasons, it might be a good idea to add a bit off padding to increase some extra space between the columns padding: 0 5%;

Check the following snippet:

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "none",
   
    "dataProvider":[{"category":"sourcing\n e prime lavorazioni ","value":-2,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#f68e8c","#f6bebc"],"colorBorder":"#f45854","isImpresaInFaseFiliera":true,"labelClass":"filiera-label"},{"category":"lavorazioni intermedieeeeeeeee ","value":-1,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#f68e8c","#f6bebc"],"colorBorder":"#f45854","isImpresaInFaseFiliera":false},{"category":"lavorazioni finali ","value":2,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#add09d","#cde0cd"],"colorBorder":"#88bc72","isImpresaInFaseFiliera":false},{"category":"distribuzione ","value":1,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#add09d","#cde0cd"],"colorBorder":"#88bc72","isImpresaInFaseFiliera":false},{"category":"valore medio filiera","average":0,"reminderPositive":999999999,"reminderNegative":-999999999,"colorFill":["#add09d","#cde0cd"],"colorBorder":"#88bc72","isImpresaInFaseFiliera":false}],
    "valueAxes": [{
        "gridColor":"#FFFFFF",
		"gridAlpha": 0.2,
		"dashLength": 0
    }],
    "gridAboveGraphs": true,
    "startDuration": 1,
    "graphs": [{
        "balloonText": "[[category]]: <b>[[value]]</b>",
        "fillAlphas": 0.8,
        "lineAlpha": 0.2,
        "type": "column",
        "valueField": "value"		
    }],
    "chartCursor": {
        "categoryBalloonEnabled": false,
        "cursorAlpha": 0,
        "zoomable": false
    },
    "categoryField": "category",
    "categoryAxis": {
        "gridPosition": "start",
        "autoWrap": true,
        "gridAlpha": 0,
         "tickPosition":"start",
         "tickLength":20,
         "classNameField": 'labelClass'
    },
	"exportConfig":{
	  "menuTop": 0,
	  "menuItems": [{
      "icon": '/lib/3/images/export.png',
      "format": 'png'	  
      }]  
	}
});
#chartdiv {
	width		: 100%;
  padding: 0 5%;
  overflow: hidden;
  word-break: break-all;
	height		: 500px;
	font-size	: 11px;
}	
.filiera-label tspan {
   font-family: Arial Black;
}
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

Upvotes: 0

Related Questions