Guruprasad Rao Guruprasad Rao - 4 months ago 45
jQuery Question

Reduce gap between bars in amcharts serial bar graph

Am using

plugin to create bar graph. Is there any ways, I can reduce distance/gap between bars both
x
an
y axis
in the graph. Here is the fiddle

Code

var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"dataProvider": [{
"name": "John",
"startTime": 0,
"endTime": 11,
"color": "#FF0F00"
}, {
"name": "Joe",
"startTime": 0,
"endTime": 13,
"color": "#FF9E01"
}, {
"name": "Susan",
"startTime": 0,
"endTime": 18,
"color": "#F8FF01"
}, {
"name": "Eaton",
"startTime": 0,
"endTime": 19,
"color": "#04D215"
}],
"valueAxes": [{
"axisAlpha": 0,
"gridAlpha": 0.1
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]</b><br>starts at [[startTime]]<br>ends at [[endTime]]",
"colorField": "color",
"fillAlphas": 0.8,
"lineAlpha": 0,
"openField": "startTime",
"type": "column",
"valueField": "endTime"
}],
"rotate": true,
"columnWidth": 0.2,
"categoryField": "name",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"gridAlpha": 0.1,
"position": "left"
},
"export": {
"enabled": true
}
});

Answer

To make the graph smaller, and reduce the margin, you have to change the columnWidth and the height in the css:

fiddle

By changing the height of the graph to 200px:

#chartdiv {
    width   : 100%;
    height  : 200px;
}

And setting the columnWidth to 0.8, I think you get what you want :)

addendum

To remove the horizontal gray lines you can set the gridAlpha to 0 in the categoryAxis

"categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
}

Updated the fiddle